Google Maps APIを使ったJavaScriptの位置情報トラッキング

キーワードをシームレスに埋め込んだ最新のブログ記事はこちら。

Google Maps JavaScript APIとPubNubを使ってジオロケーション機能を備えたライブのリアルタイム・ウェブ・アプリケーションを作成する4つのセグメント・シリーズの完結編です。チュートリアルでは、JavaScriptとPubNubを使って飛行経路を生成するユーザーエクスペリエンスを説明します。

これがどのように実装されているかの例については、PubNubのウェブサイトにある私たちのショーケースのデモをチェックしてください。リアルタイムトラッキングでPubNubをどのように組み込むかについては、Geolocationデモに移動します。デモのコードはGithubをご覧ください。

フライトパスとは何ですか？

このチュートリアルで実装されているフライトパスはポリラインのことで、モバイルデバイスやウェブブラウザ上の地図上にユーザーが指定したポイントを通るパスを動的に描画することができます。このポリラインは、HTML5 Geolocation APIと Google Maps APIに不可欠であり、移動パターンを追跡します。

チュートリアルの概要

パート1、 2、3、、JavaScript環境のセットアップ、マップマーカーとロケーショントラッキングについて説明しました。

それができたら、次のパートに進んでください。

コードのチュートリアル

まずは let\ 変数 map\、mark\、lineCoords\ を定義して、マップ、マーカー、ポリラインの座標オブジェクトを保持することから始めましょう。こうすることで、PubNubのイベントに合わせて調整することができる。続いて、Google Maps JavaScript APIが読み込みを開始したときに使用できる initialize\ コールバックを定義します。YOUR_GOOGLE_MAPS_API_KEY`は実際のAPIキーに置き換えてください。

js let map; let mark; let lineCoords = []; let initialize = function() { map = new google.maps.Map(document.getElementById('map-canvas'), {center:{lat:lat,lng:lng},zoom:12}); mark = new google.maps.Marker({position:{lat:lat, lng:lng}, map:map}); }; window.initialize = initialize;

さて、'redraw' イベントハンドラで、geolocation の `getCurrentPosition()` メソッドを呼び出して、新しい位置情報をその場で更新します。

緯度経度

次にredrawイベントハンドラを定義し、新しい位置が変更されたイベントを受信したときに呼び出します。関数の最初の部分では、緯度と経度をメッセージからの新しい値に設定します。次に、マップ、マーカー、ポリラインオブジェクトの適切なメソッドを呼び出して、位置を更新し、線の端に追加し、マップを再配置します。

js var redraw = function(payload) { lat = payload.message.lat; lng = payload.message.lng; map.setCenter({lat:lat, lng:lng, alt:0}); mark.setPosition({lat:lat, lng:lng, alt:0}); lineCoords.push(new google.maps.LatLng(lat, lng)); var lineCoordinatesPath = new google.maps.Polyline({ path: lineCoords, geodesic: true, strokeColor: '#2E10FF' }); lineCoordinatesPath.setMap(map); };

PubNubの初期化

コールバックを定義した後、iOS、Android、JavaScript、.NET、Java、Ruby、Python、PHPなどの技術スタックにわたって携帯電話、タブレット、ブラウザ、ラップトップで動作するPubNubリアルタイム・データ・ストリーミング機能を初期化する。

js const pnChannel = "map3-channel"; const pubnub = new PubNub({ publishKey: 'YOUR_PUB_KEY', subscribeKey: 'YOUR_SUB_KEY' }); pubnub.subscribe({channels: [pnChannel]}); pubnub.addListener({message:redraw});

PubNubのリアルタイムチャネルでのトピックの公開と 購読機能は、効率的なデータストリーミング機能を提供します。

緯度/経度のパブリッシュ

この簡単なチュートリアルでは、基本的なJavaScriptのインターバル・タイマーをセットアップして、現在時刻に基づいて新しい位置をパブリッシュします。500ミリ秒ごとに、指定したPubNubチャンネルに新しい緯度経度オブジェクト（北東移動座標）をパブリッシュする匿名コールバック関数を呼び出します。あなたのアプリでは、おそらくライブのデバイスの位置やユーザーが報告した位置から位置を取得することになるでしょう。

js setInterval(function() { pubnub.publish({channel:pnChannel, message:{lat:window.lat + 0.001, lng:window.lng + 0.01}}); }, 500);

最後に、Google Maps APIを初期化して、DOM要素とJavaScriptの前提条件が満たされていることを確認します。

`js

まとめ

このチュートリアルシリーズでは、GoogleMaps APIとPubNubがウェブアプリやモバイルアプリでリアルタイムの位置情報をトラッキングするために非常にうまく連携する方法を紹介しました。これはUberや Lyftのようなライドヘイリングサービスがリアルタイムで車両の動きを表示するのと似ている。