+ + +src + +
+ + + + + \ No newline at end of file diff --git a/leaflet/map/kairyougps/src/kairyou.js b/leaflet/map/kairyougps/src/kairyou.js new file mode 100644 index 0000000..a005135 --- /dev/null +++ b/leaflet/map/kairyougps/src/kairyou.js @@ -0,0 +1,82 @@ +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: '© OpenStreetMap contributors' + }).addTo(mymap); + + var gpsmarker = L.marker(mymap.getCenter()).addTo(mymap); + gpsmarker.bindPopup("STARTおしてね").openPopup(); + + var goalLat = 38.9; // ゴールの緯度 + var goalLng = 139.9; // ゴールの経度 + var goalRadius = 25; // ゴール判定半径（メートル） + + var nTrial = 100; + var watchId = null; // 最初はnullにしておく + function stopGPS() { + console.log("watchId="+watchId); + if (watchId != null) { + navigator.geolocation.clearWatch(watchId); + document.getElementById("title").textContent = "stop"; + gpsmarker.setPopupContent("停めました"); + } + watchId = null; + } + function tryWatchGPS() { + stopGPS(); // 二重で動かないように注意する + watchId = navigator.geolocation.watchPosition( + onSuccess, onError,{ + maximumAge: 0, timeout: 3000, enableHighAccuracy: true + }); + document.getElementById("title").textContent = "START!!"; + } + function onSuccess(pos) { + var latlng = L.latLng([pos.coords.latitude, pos.coords.longitude]); + mymap.panTo(latlng); + + // ゴールまでの距離を計算 + var distance = calculateDistance(latlng.lat, latlng.lng, goalLat, goalLng); + + if (distance <= goalRadius) { + gpsmarker.setLatLng(latlng).setPopupContent("ゴール!").openPopup(); + } else { + gpsmarker.setLatLng(latlng).setPopupContent( + "ここは lat=" + latlng.lat + ", lng=" + latlng.lng + " です." + ).openPopup(); + } + } + + function calculateDistance(lat1, lon1, lat2, lon2) { + var R = 6371000; // 地球の半径（メートル） + var φ1 = toRadians(lat1); + var φ2 = toRadians(lat2); + var Δφ = toRadians(lat2 - lat1); + var Δλ = toRadians(lon2 - lon1); + + var a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) + + Math.cos(φ1) * Math.cos(φ2) * + Math.sin(Δλ / 2) * Math.sin(Δλ / 2); + + var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); + + var distance = R * c; + return distance; + } + + function toRadians(degrees) { + return degrees * (Math.PI / 180); + } + + function onError(err) { + restN = "あと"+(--nTrial)+"回試行します。"; + gpsmarker.setPopupContent("捕捉失敗:"+restN).openPopup(); + if (nTrial <= 0) { + navigator.geolocation.clearWatch(watchId); + } + } + + // STARTボタンに開始を仕込む + document.getElementById("start").addEventListener("click", tryWatchGPS); + // STOPボタンに停止を仕込む + document.getElementById("stop").addEventListener("click", stopGPS); +}, false); \ No newline at end of file diff --git a/leaflet/map/otakaraman/gps-chase.js b/leaflet/map/otakaraman/gps-chase.js index ea5e036..139a61a 100644 --- a/leaflet/map/otakaraman/gps-chase.js +++ b/leaflet/map/otakaraman/gps-chase.js @@ -1,60 +1,69 @@ 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: - '© OpenStreetMap \ - contributors' + attribution: + '© OpenStreetMap \ + contributors' }).addTo(mymap); var gpsmarker = L.marker(mymap.getCenter()).addTo(mymap); gpsmarker.bindPopup("STARTおしてね").openPopup(); + var goalMarker = L.marker([38.5, 139.5]).addTo(mymap); // ゴールの位置を設定 + var nTrial = 100 - var watchId = null; // 最初はnullにしておく - function stopGPS() { // watchが動いていたら止めてnullにする - console.log("watchId="+watchId); - if (watchId != null) { // nullかどうかで比較しないとだめ(初期値0) - navigator.geolocation.clearWatch(watchId); - document.getElementById("title").textContent = "stop"; - gpsmarker.setPopupContent("停めました"); - } - watchId = null; + var watchId = null; + function stopGPS() { + console.log("watchId=" + watchId); + if (watchId != null) { + navigator.geolocation.clearWatch(watchId); + document.getElementById("title").textContent = "stop"; + gpsmarker.setPopupContent("停めました"); + } + watchId = null; } function tryWatchGPS() { - stopGPS(); // 二重で動かないように注意する - watchId = navigator.geolocation.watchPosition( - onSuccess, onError,{ - maximumAge: 0, timeout: 3000, enableHighAccuracy: true}); - document.getElementById("title").textContent = "START!!"; + stopGPS(); + watchId = navigator.geolocation.watchPosition( + onSuccess, onError, { + maximumAge: 0, timeout: 3000, enableHighAccuracy: true + }); + document.getElementById("title").textContent = "START!!"; } - function onSuccess(pos) { // GPS信号が取れたらここに来る - var latlng = L.latLng([pos.coords.latitude, pos.coords.longitude]); - mymap.panTo(latlng);// 地図の中心をそこにする - console.log(latlng); - // ★★★★★ ここから - if (38.5 < latlng.lat < 39 && 139.5 < latlng.lng < 140) { - gpsmarker.setLatLng(latlng).setPopupContent( - "お宝発見！" - ).openPopup(); - } - else { - gpsmarker.setLatLng(latlng).setPopupContent( - "ここは lat="+latlng.lat+", lng="+latlng.lng+" です." - ).openPopup(); - } - // ★★★★★ ここまでの latlng.lat と latlng.lng を - // if文などで判定して、特定の場所に近づいたら「GOAL!」と - // 表示するように変えてみよ。 + function onSuccess(pos) { + var latlng = L.latLng([pos.coords.latitude, pos.coords.longitude]); + mymap.panTo(latlng); + console.log(latlng); + + // ゴールとの距離を計算（単位はメートル） + var distanceToGoal = latlng.distanceTo(goalMarker.getLatLng()); + + // ゴールとの距離が25m以内なら「ゴール!」と表示 + if (distanceToGoal <= 25) { + gpsmarker.setLatLng(latlng).setPopupContent( + "ゴール! 距離: " + distanceToGoal.toFixed(2) + "m" + ).openPopup(); + } else { + gpsmarker.setLatLng(latlng).setPopupContent( + "ここは lat=" + latlng.lat + ", lng=" + latlng.lng + " です. 距離: " + distanceToGoal.toFixed(2) + "m" + ).openPopup(); + } } function onError(err) { - restN = "あと"+(--nTrial)+"回試行します。"; - gpsmarker.setPopupContent("捕捉失敗:"+restN).openPopup(); - if (nTrial <= 0) { - navigator.geolocation.clearWatch(watchId); - } + restN = "あと" + (--nTrial) + "回試行します。"; + gpsmarker.setPopupContent("捕捉失敗:" + restN).openPopup(); + if (nTrial <= 0) { + navigator.geolocation.clearWatch(watchId); + } } - // STARTボタンに開始を仕込む + + // クリックした位置にマーカーを移動 + mymap.on('click', function (e) { + var clickedLatLng = e.latlng; + gpsmarker.setLatLng(clickedLatLng); + console.log(clickedLatLng); + }); + document.getElementById("start").addEventListener("click", tryWatchGPS); - // STOPボタンに停止を仕込む document.getElementById("stop").addEventListener("click", stopGPS); -}, false); \ No newline at end of file +}, false); diff --git a/leaflet/map/otakaraman/gps.html b/leaflet/map/otakaraman/gps.html index b1298c9..62a49d6 100644 --- a/leaflet/map/otakaraman/gps.html +++ b/leaflet/map/otakaraman/gps.html @@ -1,7 +1,7 @@ -