document.addEventListener("DOMContentLoaded", () => { var mymap = L.map("gpsmap").setView([38.891, 139.824], 16); L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> \ contributors' }).addTo(mymap); L.control.scale({position: 'topleft'}).addTo(mymap); var gpsmarker = L.marker(mymap.getCenter()).addTo(mymap); gpsmarker.bindPopup("「start」を押して計測開始").openPopup(); console.log(gpsmarker); var nTrial = 100 var watchId = null;// 最初はnullにしておく var x1,x2,y1,y2 = 0; var all = 0; const r = Math.PI / 180; //Math.PIは円周と直径の比率およそ「3.14159」を表す function stopGPS() { // watchが動いていたら止めてnullにする console.log("watchId="+watchId); if (watchId != null) { // nullかどうかで比較しないとだめ(初期値0) navigator.geolocation.clearWatch(watchId); document.getElementById("timer").textContent = "計測を停止したよ"; gpsmarker.setPopupContent("「stop」が押されたため計測を停止しました。"); } watchId = null; } function tryWatchGPS() { stopGPS(); // 二重で動かないように注意する watchId = navigator.geolocation.watchPosition( onSuccess, onError,{ maximumAge: 0, timeout: 3000, enableHighAccuracy: true}); document.getElementById("timer").textContent = "Let's walking!"; } function onSuccess(pos) { // GPS信号が取れたらここに来る var latlng = L.latLng([pos.coords.latitude, pos.coords.longitude]); mymap.panTo(latlng);// 地図の中心をそこにする console.log(latlng); gpsmarker.setLatLng(latlng).setPopupContent( "ここは lat="+latlng.lat+", lng="+latlng.lng+" です." ).openPopup(); x1 = latlng.lat, y1 = latlng.lng; } function nowGPS(){ stopGPS(); // 二重で動かないように注意する watchId = navigator.geolocation.watchPosition( onGood, onError,{ maximumAge: 0, timeout: 3000, enableHighAccuracy: true}); document.getElementById("timer").textContent = "現在地はここ!"; } function onGood(pos) { // nowGPSでGPS信号が取れたらここに来る var latlng = L.latLng([pos.coords.latitude, pos.coords.longitude]); mymap.panTo(latlng);// 地図の中心をそこにする console.log(latlng); gpsmarker.setLatLng(latlng).setPopupContent( "現在地の座標は lat="+latlng.lat+", lng="+latlng.lng+" です." ).openPopup(); x2 = latlng.lat,y2 = latlng.lng; distance(x1, y1, x2, y2); } function onError(err) { restN = "あと"+(--nTrial)+"回試行します。"; gpsmarker.setPopupContent("捕捉失敗:"+restN).openPopup(); if (nTrial <= 0) { navigator.geolocation.clearWatch(watchId); } } function result(){ function distance(x1, y1, x2, y2) { x1 *= r;//乗算代入 y1 *= r; x2 *= r; y2 *= r; var dis = (6371 * Math.acos(Math.cos(x1) * Math.cos(x2) * Math.cos(y2 - y1) + Math.sin(x1) * Math.sin(x2)))*1000; //地球を半径6,371kmの球体としたときの計算。Google mapと同じ計算...らしい all += Math.floor(dis * 10) / 10; console.log(all); } document.getElementById("timer").textContent = "お疲れ^^ どれくらい歩いたかな"; gpsmarker.setPopupContent("今回の歩行距離は"+all).openPopup(); watchId = null; } document.getElementById("start").addEventListener("click", tryWatchGPS); document.getElementById("stop").addEventListener("click", stopGPS); document.getElementById("now").addEventListener("click", nowGPS); document.getElementById("result").addEventListener("click", result); }, false);