var center = [38.891, 139.824]; var clickCount = 0; 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); function latlngdist(pos1, pos2) { return pos1.distanceTo(pos2); } var path = []; var line = null; var lineprop = { color: 'navy', opacity: 0.6, weight: 8 }; var sMarker, gMarker; var totalDist = 0; var info = document.getElementById('info'); function updatedistance(delta) { // 距離の加算を行ない結果を totalDist += delta; // info要素に距離を表示する info.innerHTML = '距離: '+Math.round(totalDist*100)/100+'m'; } var tm = 0; var time = document.getElementById('time'); if (totalDist < 500) {tm = 5; } else if (totalDist < 1000){tm = 7; } else if (totalDist < 1500){tm = 9; } else if (totalDist< 2000){tm = 11; } else if (totalDist < 2500){tm = 13; } else{tm = 15; } function updatedistance(delta) { totalDist += time; time.innerHTML = '時間: '+Math.round(tm)+'分'; } function resetPath() { sMarker.remove(mymap); gMarker.remove(mymap); line.remove(mymap); 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(); if (path.length > 1 && e.latlng.lat == path[path.length-1].lat && e.latlng.lng == path[path.length-1].lng) { return null; } path.push(e.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; time.innerHTML = imsg;// 情報表示 } else { line.addLatLng(e.latlng); gMarker.setLatLng(e.latlng); } if (path.length > 1) { updatedistance(latlngdist(path[path.length-2], path[path.length-1])); } if (e.originalEvent.shiftKey) { // SHIFT+クリックで resetPath(e); // 終了 } } function removePoint(e) { if (path.length > 1) { let rm = path.pop(); updatedistance(-latlngdist(rm, path[path.length-1])); line.setLatLngs(path); gMarker.setLatLng(path[path.length-1]); mymap.panTo(path[path.length-1]); } else { info.innerHTML = '始点は削れません。' } } mymap.on('click', measurePath); mymap.on('contextmenu', removePoint); document.getElementById('undo').addEventListener('click', removePoint); document.getElementById('finish').addEventListener('click', resetPath);