通过实时服务提供商进行实时地理定位跟踪

Question

我想制作一个地图标记，它会在从服务器获得更新时移动。每个地图标记都由纬度和经度描述。

  var url = '/tracking/records/fetch'+ '&id=' + user_id +'&type='+type;

此端点 returns 一组 latitude,longitude JSON 格式。

如何在浏览器从服务器获取更新时移动标记？

Answer 1

听起来您的 /tracking/records/fetch 端点设置为轮询：您的网页可以重复从服务器获取一整套坐标，然后更新这些坐标的地图视图。要做到这一点，您需要从纯轮询转向推送。

首先，sign up for a Pusher account。然后让您的网页连接到您的 Pusher 应用程序并订阅新坐标的频道：

<script src="//js.pusher.com/4.0/pusher.min.js"></script>
<script>
var pusher = new Pusher('YOUR_APP_KEY', {
  cluster: 'YOUR_APP_CLUSTER'
});
var tracking-records = pusher.subscribe('tracking-records-' + type + '-' + user_id);  // Channel specific to this user
tracking-records.bind('new-tracking-record', function(data) {
  console.log('A new tracking record with latitude', data.latitude, 'and longitude', data.longitude);
  // Update your Google Map view here using data.latitude, data.longitude
});
</script>

然后在您的服务器上，确定跟踪记录的创建位置（可能是数据库插入）。届时，将新坐标发布到 tracking-records 频道。这是 Node.js 中的示例：

var Pusher = require('pusher');

var pusher = new Pusher({
  appId: 'APP_ID',
  key: 'APP_KEY',
  secret: 'APP_SECRET',
  cluster: 'APP_CLUSTER'
});

pusher.trigger(
  'tracking-records-' + type + '-' + user_id,  // The channel name
  'new-tracking-record',  // The event type
  {latitude: 51, longitude: 3}  // The coordinate data
);

有关更详细的示例，Pusher 在 how to track our pizza in realtime with Pusher and Google Maps, and another tutorial on how to build a realtime map using Laravel 上有一个教程。

通过实时服务提供商进行实时地理定位跟踪

Realtime geolocation tracking via realtime service provider

google-maps

real-time

laravel

pusher