<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>マップ 距離計測</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<style>
div#mymap {
width: 80vw;
height: 70vh;
margin: 0 auto;
}
h2 {
background: pink;
padding: 10px;
}
button {
margin: 5px;
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
}
</style>
</head>
<body>
<h1>距離を計測する</h1>
<h2 id="info">地図上でクリックしてください</h2>
<h2 id="target">目標距離: 3000m</h2>
<button id="undo">一つ前に戻る</button>
<button id="reset">リセット</button>
<div id="mymap"></div>
<script>
var mymap = L.map('mymap').setView([38.891, 139.824], 16);
L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution: '<a href="http://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>'
}).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 MAX_DISTANCE = 3000;
var info = document.getElementById('info');
function updatedistance(delta) {
totalDist += delta;
info.innerHTML = `距離: ${Math.round(totalDist)}m`;
if (totalDist >= MAX_DISTANCE) {
alert("目標距離に達しました！");
}
}
function resetPath() {
if (line) line.remove();
if (sMarker) sMarker.remove();
if (gMarker) gMarker.remove();
path = [];
totalDist = 0;
line = sMarker = gMarker = null;
mymap.doubleClickZoom.enable();
info.innerHTML = "リセットされました。";
}
function measurePath(e) {
var latlng = e.latlng;
if (
path.length > 1 &&
latlng.lat === path[path.length - 1].lat &&
latlng.lng === path[path.length - 1].lng
) {
return;
}
path.push(latlng);
var message = `北緯 ${latlng.lat} 東経 ${latlng.lng}`;
if (path.length === 1) {
sMarker = L.marker(latlng).addTo(mymap).bindPopup(message);
gMarker = L.marker(latlng).addTo(mymap).bindPopup(message);
line = L.polyline(path, lineprop).addTo(mymap);
info.innerHTML = "始点が設定されました。";
} else {
line.addLatLng(latlng);
gMarker.setLatLng(latlng);
updatedistance(latlngdist(path[path.length - 2], latlng));
}
if (e.originalEvent.shiftKey) {
resetPath();
}
}
function removePoint() {
if (path.length > 1) {
let removed = path.pop();
updatedistance(-latlngdist(removed, 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);
document.getElementById("undo").addEventListener("click", removePoint);
document.getElementById("reset").addEventListener("click", resetPath);
</script>
</body>
</html>
