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); var image1 = "<h1>公益ホール</h1>"; var popup1 = L.popup({ maxWidth: 450 }).setContent(image1); let a = L.marker([38.879230,139.847138]).bindPopup(popup1).addTo(mymap); a = L.latLng(38.892325, 139.819474); var image2 = "<h1>教務学生課</h1>"; var popup2 = L.popup({ maxWidth: 450 }).setContent(image2); let b = L.marker([38.893690, 139.819490]).bindPopup(popup2).addTo(mymap); b = L.latLng(38.893690, 139.819490); var image3 = "<h1>学生棟</h1>"; var popup3 = L.popup({ maxWidth: 450 }).setContent(image3); let c = L.marker([38.892972, 139.818900]).bindPopup(popup3).addTo(mymap); c = L.latLng(38.892972, 139.818900); var image4 = "<h1>学生棟</h1>"; var popup4 = L.popup({ maxWidth: 450 }).setContent(image4); let d = L.marker([38.894329, 139.819570]).bindPopup(popup4).addTo(mymap); d = L.latLng(38.894329, 139.819570); 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; } function tryWatchGPS() { 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); // ★★★★★ ここから gpsmarker.setLatLng(latlng).setPopupContent( "ここは lat="+latlng.lat+", lng="+latlng.lng+" です." ).openPopup(); var qs1 = "<h1>問題です!</h1><h2>サンプル<h2>"; var popup1 = L.popup({ maxWidth: 450 }).setContent(qs1); var x = latlng.lat, y = latlng.lng; var latlng1 = L.latLng([38.879232, 139.853824]); var latlng2 = L.latLng([38.893690, 139.819490]); var latlng3 = L.latLng([38.892972, 139.818900]); var latlng4 = L.latLng([38.894329, 139.819570]); //console.log(latlng.distanceTo(latlng2)); if(latlng.distanceTo(latlng1) < 50){ alert("問題です!鳥海山の標高何mでしょうか?"); stopGPS(); }else if (latlng.distanceTo(latlng2) < 50){ alert("問題です!東北公益文科大学の創立は何年でしょうか?(数字のみ入力してください)"); stopGPS(); }else if (latlng.distanceTo(latlng3) < 50){ alert("問題です!東北公益文科大学は私立大学です。〇か☓か"); stopGPS(); }else if(latlng.distanceTo(latlng4) < 50){ alert("問題です!飯盛山の標高何mでしょうか?"); stopGPS(); } } function checkButton(){ answer = document.getElementById( "mytext" ).value ; //msg.innerText = '解答しました' if(38.879230,139.847138){ if(answer == 2236){ alert("正解です"); }else{ alert("不正解です"); } }else if(38.893690, 139.819490){ if(answer == 2001){ alert("正解です"); }else{ alert("不正解です"); } }else if(38.892972, 139.818900){ if(answer == 〇){ alert("正解です"); }else{ alert("不正解です"); } }else if(38.894329, 139.819570){ if(answer == 1643){ alert("正解です"); }else{ alert("不正解です"); } } } function onError(err) { restN = "あと"+(--nTrial)+"回試行します。"; gpsmarker.setPopupContent("捕捉失敗:"+restN).openPopup(); if (nTrial <= 0) { navigator.geolocation.clearWatch(watchId); } } document.getElementById("checkButton").addEventListener("click", checkButton); // STARTボタンに開始を仕込む document.getElementById("start").addEventListener("click", tryWatchGPS); // STOPボタンに停止を仕込む document.getElementById("stop").addEventListener("click", stopGPS); }, false);