###前提・実現したいこと
googleMapを活用して移動経路の記録をマップ上で行いたいと考えています。
現時点では、geoLocation(watchPosition)を活用して位置情報を常に追跡し、マップに表示させています。
googleMapを活用して移動経路の表示をしたいです。
今悩んでいることは、サーバーへの位置情報データの格納方法と、移動経路を線で結ぶことです。
線を結んでいくタイミングは、「移動するごとに常に線を表示」または「位置情報をまとめて最後に線を結ぶ」どちらでも構いません。初心者でも理解が早いほうが嬉しいです。
Polylineを活用すると予想していますが、もっとふさわしいものがあれば教えていただきたいです。
サンプルや、参考になるページ等ご存じでしたらお願いします。
###該当のソースコード
/html/
</head> <body onload="Init()"> <div class="map-wrapper"> <div id="map-canvas"></div> </div> <h2>取得したデータ</h2> <dl id="result"></dl> </body> </html><title>Plot Map</title>
/JavaScript/
// グローバル変数
var syncerWatchPosition = {
count: 0 ,
lastTime: 0 ,
map: null ,
marker: null ,
} ;
// 成功した時の関数
function successFunc( position )
{
// データの更新
++syncerWatchPosition.count ; // 処理回数
// HTMLに書き出し
document.getElementById( 'result' ).innerHTML = '<dt>緯度</dt><dd>' + position.coords.latitude + '</dd><dt>経度</dt><dd>' + position.coords.longitude + '</dd><dt>高度</dt><dd>' + position.coords.altitude + '</dd><dt>速度</dt><dd>' + position.coords.speed + '</dd><dt>実行回数</dt><dd>' + syncerWatchPosition.count + '回</dd>' ;
// 位置情報
var latlng = new google.maps.LatLng( position.coords.latitude , position.coords.longitude ) ;
// Google Mapsに書き出し
//if( syncerWatchPosition.map == null )
//{
// 地図の新規出力
syncerWatchPosition.map = new google.maps.Map( document.getElementById( 'map-canvas' ) , {
zoom: 17 , // ズーム値
center: latlng , // 中心座標 [latlng]
} ) ;
// マーカーの新規出力 syncerWatchPosition.marker = new google.maps.Marker( { map: syncerWatchPosition.map , position: latlng , } ) ; map.drawRoute({ origin: [-12.044012922866312, -77.02470665341184], destination: latlng, travelMode: 'driving', strokeColor: '#131540', strokeOpacity: 0.6, strokeWeight: 6 });
//}
}
// 失敗した時の関数
function errorFunc( error )
{
// エラーコードのメッセージを定義
var errorMessage = {
0: "原因不明のエラーが発生しました…。" ,
1: "位置情報の取得が許可されませんでした…。" ,
2: "電波状況などで位置情報が取得できませんでした…。" ,
3: "位置情報の取得に時間がかかり過ぎてタイムアウトしました…。" ,
} ;
// エラーコードに合わせたエラー内容を表示
alert( errorMessage[error.code] ) ;
}
// オプション・オブジェクト
var optionObj = {
"enableHighAccuracy": false ,
//"timeout": 1000000 ,
//"maximumAge": 0 ,
} ;
function Init(){
// 現在位置を取得する
navigator.geolocation.watchPosition( successFunc , errorFunc , optionObj ) ;
}
###補足情報
※プログラミング初心者です。
筋の通っていない内容や、無駄な記述などが多数見受けられると思いますがどうぞよろしくお願いいたします。
後で確認できるように無駄な記述も「//」で残してあります。ご了承ください。