diff --git a/map/game/game.html b/map/game/game.html index b01d9ce..dfe9a29 100644 --- a/map/game/game.html +++ b/map/game/game.html @@ -20,6 +20,7 @@
+
diff --git a/map/game/game.js b/map/game/game.js index 8690024..1c7dfa9 100644 --- a/map/game/game.js +++ b/map/game/game.js @@ -47,6 +47,23 @@ 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(); + path.push(pos.latlng); // クリック緯度経度を配列に追加 + if (path.length == 1) { // 始点未設定なら + // 始点終点マーカを生成しマップに貼り付けポップアップ文字列を登録 + sMarker = L.marker(path[0]).addTo(mymap).bindPopup(imsg); + gMarker = L.marker(path[0]).addTo(mymap).bindPopup(imsg); + line = L.polyline(path, lineprop).addTo(mymap) // polyline生成 + info.innerHTML = imsg; // 情報表示 + } else { // 2個目以後のポイント打ちなら + line.addLatLng(pos.latlng); // polylineにクリック点を追加 + gMarker.setLatLng(pos.latlng); // 終点マーカをそこに移動 + } + if (path.length > 1) { // 2個以上点が打たれたら計算 + updatedistance(latlngdist(path[path.length-2], path[path.length-1])); + } } function onError(err) { restN = "あと"+(--nTrial)+"回試行します。"; @@ -98,6 +115,17 @@ totalDist += delta; // info要素に距離を表示する info.innerHTML = '距離: '+Math.round(totalDist*100)/100+'m'; } + function resetPath() { + sMarker.remove(mymap); + gMarker.remove(mymap); + line.remove(mymap); // 軌跡Polylineの除去 + line = sMarker = gMarker = null; + path = []; + totalDist = 0; + mymap.doubleClickZoom.enable(); // ダブルクリックズーム許可 + info.innerHTML = 'クリアしました'; + } + function measurePath(e) { // クリック時の主となる処理 var imsg = '北緯 '+e.latlng.lat+' 東経 '+e.latlng.lng; mymap.doubleClickZoom.disable(); // ダブルクリックズーム禁止 @@ -129,4 +157,5 @@ document.getElementById("start").addEventListener("click", tryWatchGPS); mymap.on("click", measurePath); // クリックイベントで measurePath() document.getElementById("stop").addEventListener("click", stopGPS); + document.getElementById("clear").addEventListener("click", resetPath); },false);