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

【问题标题】：Realtime geolocation tracking via realtime service provider通过实时服务提供商进行实时地理定位跟踪
【发布时间】：2017-06-21 08:57:29
【问题描述】：

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

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

此端点以 JSON 格式返回一组 latitude,longitude。

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

【问题讨论】：

标签： laravel google-maps real-time pusher

【解决方案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 上有一个教程，在how to build a realtime map using Laravel 上有另一个教程。

【讨论】：