diff --git a/map/gpsgame/gps-game.html b/map/gpsgame/gps-game.html new file mode 100644 index 0000000..5ce883a --- /dev/null +++ b/map/gpsgame/gps-game.html @@ -0,0 +1,31 @@ + + + +GDb#04 GPSでGO見本改変 + + + + + + + + +

目的地へいこう!

+

+ + + + + +src +

+

 

+
+ + + + \ No newline at end of file diff --git a/map/gpsgame/gps-game.js b/map/gpsgame/gps-game.js new file mode 100644 index 0000000..47eb74f --- /dev/null +++ b/map/gpsgame/gps-game.js @@ -0,0 +1,128 @@ +document.addEventListener("DOMContentLoaded", () => { + var mymap = L.map("gpsmap").setView([38.891, 139.824], 20); + L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', { + attribution: + '© OpenStreetMap \ + contributors' + }).addTo(mymap); + + // ボタンの仕込み----------------------------------------------------------- + + // 目的地確定を仕込む + document.getElementById("dn").addEventListener("click", DestinationConfirmed); + // STARTボタンに開始を仕込む + document.getElementById("start").addEventListener("click", tryWatchGPS); + // STOPボタンに停止を仕込む + document.getElementById("stop").addEventListener("click", stopGPS); + // RESTARTボタンにリスタートを仕込む + document.getElementById("resart").addEventListener("click", doReload); + // お試しボタンを仕込む + document.getElementById("otamesi").addEventListener("click", otamesi); + + // 全体での定義----------------------------------------------------------- + + var destination = L.marker(mymap.getCenter(), {draggable: true,icon: L.spriteIcon('red')}).addTo(mymap); + destination.bindPopup("目的地を動かして選んで!").openPopup(); + var nTrial = 100 + var watchId = null; // 最初はnullにしておく + var ccopt = { //目的地のサークル + radius: 15, + color: "blue" + }; + var gpsmarker = L.marker([0,0], {draggable: true}).addTo(mymap); + gpsmarker.bindPopup(""); + + + + // 目的地ボタン----------------------------------------------------------- + + function DestinationConfirmed(){ // 目的地を作成する。 + var alatlng = destination.getLatLng(); + var ccobj = L.circle(alatlng, ccopt).addTo(mymap); + ccobj.bindPopup("この位置は"+alatlng+"です。").openPopup(); + document.getElementById("dn").disabled = true; //ボタンを無効化 + destination.setLatLng({draggable: false}); + mokutekiti = destination.getLatLng(); + document.getElementById("arrive").textContent = mokutekiti; + } + + destination.on('dragend', function(e) { // 目的地のピンをの座標を示す。 + var latlng = e.target.getLatLng(); + e.target.setPopupContent("この位置は"+latlng+"です。").openPopup(); + + }); + + // お試しボタンの動作----------------------------------------------------------- + function otamesi(){ + var mokutekiti = destination.getLatLng(); + document.getElementById("arrive").textContent = mokutekiti; + var latlng = L.latLng([38.89360, 139.81882]); + gpsmarker.setLatLng(latlng).setPopupContent( + "ここは lat="+latlng.lat+", lng="+latlng.lng+" です." + ).openPopup(); + document.getElementById("otamesi").disabled = true; //ボタンを無効化 + + gpsmarker.on('dragend', function(e) { + var latlng = e.target.getLatLng(); + if ((latlng.lat >= mokutekiti.lat-0.000130 && latlng.lat <= mokutekiti.lat+0.000130) && (latlng.lng >= mokutekiti.lng-0.000130 && latlng.lng <= mokutekiti.lng+0.000130)) { + e.target.setPopupContent("目的地到着").openPopup(); + } else { + e.target.setPopupContent("この位置は"+latlng+"です。").openPopup(); + } + }); + } + + // STOPボタン----------------------------------------------------------- + + 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; + } + + // STARTボタン----------------------------------------------------------- + + + 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(); + if ((latlng.lat >= 38.89360 && latlng.lat <= 38.89361) && (latlng.lng >= 139.81890 && latlng.lng <= 139.81891)) { + document.getElementById("title").textContent = "GOAL!!"; + } + // ★★★★★ ここまでの latlng.lat と latlng.lng を + // if文などで判定して、特定の場所に近づいたら「GOAL!」と + // 表示するように変えてみよ。 + } + function onError(err) { + restN = "あと"+(--nTrial)+"回試行します。"; + gpsmarker.setPopupContent("捕捉失敗:"+restN).openPopup(); + if (nTrial <= 0) { + navigator.geolocation.clearWatch(watchId); + } + } + + // RESTRTボタン----------------------------------------------------------- + + function doReload() { + // reloadメソッドによりページをリロード + window.location.reload(true); + } + + // ----------------------------------------------------------- +}, false); \ No newline at end of file