<html>
<head>
<title>待ち合わせMAP</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<style>
body { font-family: sans-serif; text-align: center; }
#map { height: 500px; width: 90%; margin: 20px auto; border: 2px solid #aaa; }
button { padding: 10px 20px; font-size: 16px; margin-top: 10px; }
</style>
</head>
<body>
<h1>現在地と近くの駅を表示</h1>
<button onclick="getLocation()">現在地を取得して表示</button>
<div id="map"></div>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
let map = L.map('map').setView([35.6812, 139.7671], 13); // 初期位置：東京駅
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// 現在地取得
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
alert("このブラウザでは位置情報が使えません。");
}
}
function showPosition(position) {
const lat = position.coords.latitude;
const lon = position.coords.longitude;
// 地図を現在地に移動
map.setView([lat, lon], 15);
// 現在地マーカー
L.marker([lat, lon]).addTo(map)
.bindPopup("📍 あなたの現在地").openPopup();
// Overpass APIで近くの駅を検索
const radius = 2000; // 2km以内
const overpassUrl = `https://overpass-api.de/api/interpreter?data=[out:json];node["railway"="station"](around:${radius},${lat},${lon});out;`;
fetch(overpassUrl)
.then(response => response.json())
.then(data => {
if (data.elements.length === 0) {
alert("近くに駅が見つかりませんでした。");
return;
}
data.elements.forEach(station => {
const name = station.tags.name || "駅名不明";
const sLat = station.lat;
const sLon = station.lon;
L.marker([sLat, sLon]).addTo(map)
.bindPopup(`🚉 ${name}`);
});
})
.catch(err => {
console.error(err);
alert("駅情報の取得に失敗しました。");
});
}
function showError(error) {
alert("位置情報を取得できませんでした: " + error.message);
}
</script>
</body>
</html>
