web-dev-qa-db-ja.com

JUST HTML / JSおよびGoogle MapsのリアルタイムGPSトラッカーを携帯電話で実行しますか？出来ますか？

GPSリアルタイムトラッキングを読んで、それについていくつかのことを見つけました。ほとんどの場合、受信データを保存するにはPHP、zope、およびデータベースが必要です。他のいくつかのメソッドは、PHPとの関係でajaxを使用します。

私の質問に関しては、都市のどこかに移動するときにマーカーなどを使用してGoogleマップに入力するだけで、htmlとJSでそれを行うことは可能ですか？これについては助けが必要です、ありがとう！

javascripthtmlgoogle-mapsgpstracking
30
cheesebunz

はい、可能です。最新のスマートフォンのほとんどのブラウザは W3C Geolocation API を実装しています。

Geolocation APIは、緯度や経度など、実装をホストするデバイスのみに関連付けられた位置情報への高レベルインターフェイスを定義します。 API自体は、基礎となる位置情報ソースに依存しません。位置情報の一般的なソースには、グローバルポジショニングシステム（GPS）と、IPアドレス、RFID、WiFiおよびBluetooth MACアドレス、GSM/CDMAセルIDなどのネットワーク信号から推測される位置、およびユーザー入力が含まれます。 APIがデバイスの実際の位置を返すという保証はありません。

このAPIは、「ワンショット」位置リクエストと繰り返し位置更新の両方を可能にするように設計されており、キャッシュされた位置を明示的に照会する機能も備えています。

Geolocation APIを使用してGoogleマップにポイントをプロットすると、次のようになります。

if (navigator.geolocation) { 
  navigator.geolocation.getCurrentPosition(function(position) {  

    var point = new google.maps.LatLng(position.coords.latitude, 
                                       position.coords.longitude);

    // Initialize the Google Maps API v3
    var map = new google.maps.Map(document.getElementById('map'), {
       zoom: 15,
      center: point,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // Place a marker
    new google.maps.Marker({
      position: point,
      map: map
    });
  }); 
} 
else {
  alert('W3C Geolocation API is not available');
}

上記は一度だけ位置を収集し、移動を開始したときに自動更新しません。これを処理するには、マーカーへの参照を保持し、定期的にgetCurrentPosition()メソッドを呼び出して、マーカーを新しい座標に移動する必要があります。コードは次のようになります。

// Initialize the Google Maps API v3
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 15,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var marker = null;

function autoUpdate() {
  navigator.geolocation.getCurrentPosition(function(position) {  
    var newPoint = new google.maps.LatLng(position.coords.latitude, 
                                          position.coords.longitude);

    if (marker) {
      // Marker already created - Move it
      marker.setPosition(newPoint);
    }
    else {
      // Marker does not exist - Create it
      marker = new google.maps.Marker({
        position: newPoint,
        map: map
      });
    }

    // Center the map on the new position
    map.setCenter(newPoint);
  }); 

  // Call the autoUpdate() function every 5 seconds
  setTimeout(autoUpdate, 5000);
}

autoUpdate();

追跡によって、この情報もサーバーに保存する必要があることを意味する場合（他の人があなたを遠隔地から移動するのを見ることができるように）、AJAXを使用してサーバー側のスクリプトにポイントを送信する必要があります。

さらに、そのようなプロジェクトに取り組む前に、 Google Maps API利用規約 でこの使用を許可していることを確認してください。

UPDATE：W3C Geolocation APIは、上記の例で使用したwatchPosition()メカニズムの代わりに使用できる setTimeout() メソッドを公開します。

45
Daniel Vassallo