diff --git a/loc-chase.js b/loc-chase.js index afed5db..f12e315 100644 --- a/loc-chase.js +++ b/loc-chase.js @@ -1,53 +1,80 @@ document.addEventListener("DOMContentLoaded", () => { - var mymap = L.map("locationmap").setView([38.891, 139.824], 16); - L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', { - attribution: - '© OpenStreetMap \ - contributors' - }).addTo(mymap); + var mymap = L.map("locationmap").setView([38.891, 139.824], 16); - var locmarker = L.marker(mymap.getCenter()).addTo(mymap); - locmarker.bindPopup("STARTおしてね").openPopup(); + L.tileLayer("https://{s}.tile.osm.org/{z}/{x}/{y}.png", { + attribution: + '© OpenStreetMap contributors' + }).addTo(mymap); - var nTrial = 100 - var watchId = null; // 最初はnullにしておく - function stopLOC() { // watchが動いていたら止めてnullにする - console.log("watchId="+watchId); - if (watchId != null) { // nullかどうかで比較しないとだめ(初期値0) - navigator.geolocation.clearWatch(watchId); - document.getElementById("title").textContent = "stop"; - locmarker.setPopupContent("停めました"); - } - watchId = null; + var locmarker = L.marker(mymap.getCenter()).addTo(mymap); + locmarker.bindPopup("STARTおしてね").openPopup(); + + var nTrial = 100; + var watchId = null; + + function stopLOC() { + console.log("watchId=" + watchId); + if (watchId != null) { + navigator.geolocation.clearWatch(watchId); + document.getElementById("title").textContent = "stop"; + locmarker.setPopupContent("停めました"); } - function tryWatchLOC() { - stopLOC(); // 二重で動かないように注意する - watchId = navigator.geolocation.watchPosition( - onSuccess, onError,{ - maximumAge: 0, timeout: 3000, enableHighAccuracy: true}); - document.getElementById("title").textContent = "START!!"; + watchId = null; + } + + function tryWatchLOC() { + stopLOC(); + 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); + + // ★★★★★ ここから(課題部分) + const goalLat = 38.892; + const goalLng = 139.825; + + const dLat = Math.abs(latlng.lat - goalLat); + const dLng = Math.abs(latlng.lng - goalLng); + + let message; + + if (dLat < 0.0003 && dLng < 0.0003) { + message = "🎉 GOAL!! 宝を見つけました!"; + } else if (dLat < 0.001 && dLng < 0.001) { + message = "おしい!もう少し!"; + } else { + message = "探索中…"; } - function onSuccess(pos) { // 衛星信号が取れたらここに来る - var latlng = L.latLng([pos.coords.latitude, pos.coords.longitude]); - mymap.panTo(latlng);// 地図の中心をそこにする - console.log(latlng); - // ★★★★★ ここから - locmarker.setLatLng(latlng).setPopupContent( - "ここは lat="+latlng.lat+", lng="+latlng.lng+" です." - ).openPopup(); - // ★★★★★ ここまでの latlng.lat と latlng.lng を - // if文などで判定して、特定の場所に近づいたら「GOAL!」と - // 表示するように変えてみよ。 + + locmarker + .setLatLng(latlng) + .setPopupContent(message) + .openPopup(); + // ★★★★★ ここまで + } + + function onError(err) { + var restN = "あと" + (--nTrial) + "回試行します。"; + locmarker.setPopupContent("捕捉失敗:" + restN).openPopup(); + if (nTrial <= 0) { + navigator.geolocation.clearWatch(watchId); } - function onError(err) { - restN = "あと"+(--nTrial)+"回試行します。"; - locmarker.setPopupContent("捕捉失敗:"+restN).openPopup(); - if (nTrial <= 0) { - navigator.geolocation.clearWatch(watchId); - } - } - // STARTボタンに開始を仕込む - document.getElementById("start").addEventListener("click", tryWatchLOC); - // STOPボタンに停止を仕込む - document.getElementById("stop").addEventListener("click", stopLOC); + } + + // ★ ボタン設定はここ + document.getElementById("start") + .addEventListener("click", tryWatchLOC); + document.getElementById("stop") + .addEventListener("click", stopLOC); + }, false);