Question

我对JS和PHP还是很陌生，但我一直在从事一个大型项目，该项目具有许多功能已有几个月，并且进展顺利。该程序主要是PHP和JS，将在一系列车辆的计算机上使用。

该程序的一项功能将使用geofences和geolocation.watchPosition监视用户的GPS位置，并在用户离开分配的geofence时发送通知。

我需要完成的一种方法是使用geolocation.watchPosition连续跟踪用户的当前位置，并将发生的任何更改存储在mysql表中，这样，如果用户离开定义的geofenced区域，他们将收到通知，告知他们已经离开了该地区。

我能够获取用户位置，使用他们的登录和注销位置更新数据库，并计算两个位置之间的距离差。我已经配置了地理围栏。

每次用户的gps位置更改时，如何使用geolocation.watchPosition，JS和PHP更新mysql表？

下面的代码示例是我用来获取用户位置并观察其位置的示例，但是我还没有找到一种方法来每次更改包含其位置的“ info”变量时都更新mysql表。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>
  <body>
	<main class="container">
    	<div id="map" class="map"></div>
    		<!-- For displaying user's coordinate or error message. -->
    	<div id="info" class="info"></div>
	</main>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=[KEY]&callback=init"></script>
  </body>
</html>

<script type="text/javascript">

const createMap = ({ lat, lng }) => {
  return new google.maps.Map(document.getElementById('map'), {
    center: { lat, lng },
    zoom: 19
  });
};

const createMarker = ({ map, position }) => {
  return new google.maps.Marker({ map, position });
};

const getCurrentPosition = ({ onSuccess, onError = () => { } }) => {
  if ('geolocation' in navigator === false) {
    return onError(new Error('Geolocation is not supported by your browser.'));
  }

  return navigator.geolocation.getCurrentPosition(onSuccess, onError);
};

const getPositionErrorMessage = code => {
  switch (code) {
    case 1:
      return 'Permission denied.';
    case 2:
      return 'Position unavailable.';
    case 3:
      return 'Timeout reached.';
    default:
      return null;
  }
}

function init() {
  const initialPosition = { lat: 37.658440, lng: -120.993629 };
  const map = createMap(initialPosition);
  const marker = createMarker({ map, position: initialPosition });

  getCurrentPosition({
    onSuccess: ({ coords: { latitude: lat, longitude: lng } }) => {
      marker.setPosition({ lat, lng });
      map.panTo({ lat, lng });
    },
    onError: err =>
      alert(`Error: ${getPositionErrorMessage(err.code) || err.message}`)
  });
}
// New function to track user's location.
const trackLocation = ({ onSuccess, onError = () => { } }) => {
  if ('geolocation' in navigator === false) {
    return navigator.geolocation.watchPosition(onSuccess, onError, {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
  });
};


  // Use watchPosition instead.
  return navigator.geolocation.watchPosition(onSuccess, onError);
};

function init() {
  const initialPosition = { lat: 37.658440, lng: -120.993629 };
  const map = createMap(initialPosition);
  const marker = createMarker({ map, position: initialPosition });

  // Use the new trackLocation function.
  trackLocation({
    onSuccess: ({ coords: { latitude: lat, longitude: lng } }) => {
      marker.setPosition({ lat, lng });
      map.panTo({ lat, lng });
    },
    onError: err =>
      alert(`Error: ${getPositionErrorMessage(err.code) || err.message}`)
  });
}
function init() {
  const initialPosition = { lat: 37.658440, lng: -120.993629 };
  const map = createMap(initialPosition);
  const marker = createMarker({ map, position: initialPosition });
  const $info = document.getElementById('info');

  trackLocation({
    onSuccess: ({ coords: { latitude: lat, longitude: lng } }) => {
      marker.setPosition({ lat, lng });
      map.panTo({ lat, lng });
      // Print out the user's location.
      $info.textContent = `Lat: ${lat} Lng: ${lng}`;
      // Don't forget to remove any error class name.
      $info.classList.remove('error');
    },
    onError: err => {
      // Print out the error message.
      $info.textContent = `Error: ${getPositionErrorMessage(err.code) || err.message}`;
      // Add error class name.
      $info.classList.add('error');
    }
  });
}
</script>

Answer 1

wacthposition返回每个新位置的id。也许您可以尝试创建一个函数（回调，promise，interval等）来查找此更改。发生之后，您可以将数据插入数据库。

如何将地理位置监视中的实时GPS坐标保存到mysql表中

1 个答案: