2016/12/12 07:05
逆
Q&A
退会済みユーザー
総合スコア0
投稿2016/12/12 06:54
編集2022/01/12 10:55下記のプログラムをデバックしたらgooglemapが表示されるのは、PC上で確認できましたが、デスクトップPCのため位置の移動ができないので、位置情報および移動した場所の線の書き出しの動作の確認ができません。最終的には、スマートフォンおよびiphoneでのを試みたいのですが、スマートフォンおよびiphoneで起動した場合、マップが表示されません。お力添えよろしくお願いいたします。
###発生している問題・エラーメッセージ
/プログラム内容/
定期的に取得した位置情報をgooglemap上に線でつなげ表示(移動経路の記録)
<!DOCTYPE HTML> <html lang="ja"> <meta charset="UTF-8"></meta> <head><title>sample</title> <style type-"text/css"> #map_wrap { width: 100%; max-width: 600px; } #position { padding: 8px; background-color: #CDE; } #position span { padding-left: 1em; font-size: 90%; } #map { width: 100%; height: 500px; } #contorol button { width: 6em; text-align: center; } #contorol button:last-child { float: right; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> </head> <body> <div id="map_wrap"> <div id="position">現在位置: <span>*** 停止中 ***</span> </div> <div id="map">google map</div> <div id="contorol"> <button type="button">START</button> <button type="button">STOP</button> </div> </div> <script type="text/javascript"> var Tracker = (function(){ // *** 初期設定・準備処理 *** var minInterval = 1000; // 情報取得の最少間隔(単位 msec) var Locator = navigator.geolocation; var watchID = null; var MapElement = document.getElementById("map"); var PositionDisp = document.querySelector("#position span"); // マップ 設定 var map = new google.maps.Map( MapElement, { zoom: 15 }); // ポリライン インスタンス作成 var PolyLine = new google.maps.Polyline({ strokeColor: '#A22', strokeOpacity: 0.55, strokeWeight: 4, map: map }); // マーカー インスタンス作成 var Markers = createMarker(); function createMarker(){ var iconURL = "http://labs.google.com/ridefinder/images/"; var icon1 = new google.maps.Marker({ icon: iconURL + "mm_20_blue.png", map: map, zIndex: 10 }); var icon2 = new google.maps.Marker({ icon: iconURL + "mm_20_red.png", map: map, zIndex: 12 }); return { start: icon1, current: icon2 } } // マップ・マーカーの初期表示 var resetMap = function(){ watchTime = new Date(); Locator.getCurrentPosition(function(p){ var pos = { lat: p.coords.latitude, lng: p.coords.longitude }; map.setCenter(pos); Markers.current.setPosition(pos); Markers.start.setPosition(pos); PolyLine.setPath([new google.maps.LatLng(pos)]); }); } // watchPositionイベント処理 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 + " / 経度 " + pos.lng; } // *** 追跡用オブジェクト *** var tracker = { start: function(){ if(watchID) return; resetMap(); PositionDisp.innerHTML = "*** 受信中 ***"; watchID = Locator.watchPosition(watchHandler); }, stop: function(){ Locator.clearWatch(watchID); PositionDisp.innerHTML = "*** 停止中 ***"; watchID = null; } }; resetMap(); return tracker; })(); // ボタンへのイベント設定 var buttons = document.querySelectorAll("#contorol button"); google.maps.event.addDomListener(buttons[0], "click", Tracker.start); google.maps.event.addDomListener(buttons[1], "click", Tracker.stop); </script> </body> </html>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。