リアルタイムサービスプロバイダによるリアルタイムジオロケーションのトラッキング

Question

リアルタイムで移動するマップマーカーを作成したいと思います。各地図マーカは、緯度と経度で表されます。これらの座標はuser_idとtypeをとるAPIによって供給されるであろう。

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

このエンドポイントは、JSON形式でlatitude,longitudeのセットを返します。

私の問題は、そのURLから継続的にデータを取得するためにリアルタイム通信が必要なことです。

Googleマップと一緒にリアルタイム通信を実装するにはどうすればよいですか？マーカーは座標で移動しますか？

Answer 1

あなたの/tracking/records/fetchエンドポイントがポーリングのために設定されているように聞こえます。あなたのウェブページは、サーバから座標のセット全体を繰り返し取得し、それらの座標のマップビューを更新することができます。これをリアルタイムに行うには、純粋なポーリングからに移動してを押す必要があります。

まず、sign up for a Pusher account。その後、あなたのWebページがあなたのプッシャーのアプリに接続し、新しい座標のためのチャネルに加入する必要があり：追跡レコードが作成される場所

<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 
); 

より詳細な例については、プッシャーはhow to track our pizza in realtime with Pusher and Google Mapsのチュートリアル、およびhow to build a realtime map using Laravel上の別のチュートリアルを持っています。