移動経路表示システム Plot Map ～描いた線を思い出に～ 小路　大祐 坂内　佑介 藤井　貴大

目次 作成手順 工夫した点 作成できなかった機能

１.作成手順 マップを表示 位置情報取得/追跡 マーカーの表示 線で移動経路を描画 実際に行った手順は、 です。 まず、マップの表示から説明をします。

マップの表示 html <script src="//maps.google.com/maps/api/js?sensor=false"> </script> js var position=new google.maps.LatLng(35.686533, 139.685519); var mapOptions={ center: position, zoom: 16, mapTypeId:google.maps.MapTypeId.ROADMAP }; MAP=new google.maps.Map(document.getElementById("MAP"),mapOptions); マップの表示には、前にあるようなプログラミングを書き込みました。 var position=new google.maps.LatLng(35.686533, 139.685519); 初めに表示される経度緯度の指定 var mapOptions={ center: position, zoom: 16, mapTypeId:google.maps.MapTypeId.ROADMAP }; マップの設定（マップの中心位置を座標に設定） MAP=new google.maps.Map(document.getElementById("MAP"),mapOptions); （マップの生成を行っています。先ほど指定したマップの設定をここで反映させています。）

学んだこと①：http/https

PlotMap.html https Map http https

https://webftp.heteml.jp/ 　　　　 　file/edit/root/plotMap/PlotMap.html src=" //maps.google.com/maps/api/…" 書かないことで上の呼び出し元が適用される src="https://maps.google.com/maps/api/... "

Google map × Geolocation API Java script ブラウザ Html５

getCurrentPosition() watchPosition() clearWatch() 位置情報 getCurrentPosition() 現在の位置情報を取得する watchPosition() 　デバイスの位置が変化するたびに位置情報を更新 clearWatch() 　位置情報を継続して監視することを解除 一度だけ、位置情報を取得するためにはgetCurrentPosition()を使用します。 デバイスの位置が変化するたびに位置情報を更新するためには、watchPosition()を使用します。 watchPosition()では常に位置情報を取得しているので、位置情報の監視を解除するためにclearWatch()を使用します。

位置情報の追跡 watchPosition // watchPositionイベント処理 watchID = Locator.watchPosition(watchHandler); var watchHandler = function(p){ if((new Date()) - watchTime < minInterval) return; watchTime = new Date(); var pos = { lat: p.coords.latitude, lng: p.coords.longitude }; map.setCenter(pos); Markers.current.setPosition(pos); PolyLine.getPath().push(new google.maps.LatLng(pos)); PositionDisp.innerHTML = "緯度 " + pos.lat.toFixed(6) + " / 経度 " + pos.lng.toFixed(6); } 次に、位置情報の追跡を行いました。 戻り値の説明

学んだこと②：位置情報取得の間隔 // 情報取得の最少間隔（単位 msec） var minInterval = 2000; if((new Date()) - watchTime < minInterval) return; watchTime = new Date();

線を描画 PolyLine ポリライン インスタンス作成 var PolyLine = new google.maps.Polyline({ strokeColor: '#DC143C', strokeOpacity: 0.55, strokeWeight: 8, map: map});

２.工夫した点 ボタンの視認性・日付と時刻 交通渋滞状況 マーカーの表示

学んだこと③：マーカーの表示 var iconURL = "//buturi.heteml.jp/webPractice/plotMap/images/"; 　var icon1 = new google.maps.Marker({ 　　icon: iconURL + "icon_6m_96.png", 　　map: map, 　　zIndex: 10 　});

３.作成できなかったこと データを加えたマップの保存 写真をマップに表示