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

Presentation on theme: "移動経路表示システム Plot Map ～描いた線を思い出に～ 小路　大祐 坂内　佑介 藤井　貴大."— Presentation transcript:

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

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

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

4 マップの表示 html <script src="//maps.google.com/maps/api/js?sensor=false"> </script> js var position=new google.maps.LatLng( , ); 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( , ); 初めに表示される経度緯度の指定 var mapOptions={ center: position, zoom: 16, mapTypeId:google.maps.MapTypeId.ROADMAP }; マップの設定（マップの中心位置を座標に設定） MAP=new google.maps.Map(document.getElementById("MAP"),mapOptions); （マップの生成を行っています。先ほど指定したマップの設定をここで反映させています。）

5 学んだこと①：http/https

6 PlotMap.html https Map http https

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

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

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

10 位置情報の追跡 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); } 次に、位置情報の追跡を行いました。 戻り値の説明

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

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

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

14

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

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

17