取得したデータ

緯度

' + position.coords.latitude + '

経度

' + position.coords.longitude + '

高度

' + position.coords.altitude + '

速度

' + position.coords.speed + '

実行回数

' + syncerWatchPosition.count + '回

回答率: 85.29%

質問するログイン新規登録

トップ HTML5に関する質問

Q&A

3回答

3673閲覧

googleMapを活用して移動経路を線で結んで表示

退会済みユーザー

総合スコア0

0グッド

0クリップ

投稿2016/12/04 19:39

編集2017/01/13 04:21

###前提・実現したいこと
googleMapを活用して移動経路の記録をマップ上で行いたいと考えています。
現時点では、geoLocation(watchPosition)を活用して位置情報を常に追跡し、マップに表示させています。
googleMapを活用して移動経路の表示をしたいです。
今悩んでいることは、サーバーへの位置情報データの格納方法と、移動経路を線で結ぶことです。
線を結んでいくタイミングは、「移動するごとに常に線を表示」または「位置情報をまとめて最後に線を結ぶ」どちらでも構いません。初心者でも理解が早いほうが嬉しいです。
Polylineを活用すると予想していますが、もっとふさわしいものがあれば教えていただきたいです。
サンプルや、参考になるページ等ご存じでしたらお願いします。
###該当のソースコード
/html/

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="robots" content="noindex,nofollow">  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./css/geolocation-api.css" rel="stylesheet"> <script scr="ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCE7BTRiGM6545NJFw3Mq0xVhVWrD-dLZ0&callback=initMap"> </script> <script src="./js/plotMap.js "></script>

   <title>Plot Map</title>

</head> <body onload="Init()"> <div class="map-wrapper"> <div id="map-canvas"></div> </div> <h2>取得したデータ</h2> <dl id="result"></dl> </body> </html>

/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 ) ;
}
###補足情報
※プログラミング初心者です。
筋の通っていない内容や、無駄な記述などが多数見受けられると思いますがどうぞよろしくお願いいたします。
後で確認できるように無駄な記述も「//」で残してあります。ご了承ください。