<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>避難所マップ</title>
<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet.js"></script>
<style>
#map { height: 600px; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = L.map('map').setView([38.9141, 139.8367], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
const locations = [
{name: "琢成小学校", lat: 38.9841, lon: 139.8424},
{name: "酒田西高等学校定時制校舎体育館", lat: 38.9076, lon: 139.8323},
{name: "酒田市総合文化センター", lat: 38.9265, lon: 139.8394},
{name: "琢成学区コミュニティ防災センター", lat: 38.9841, lon: 139.8424},
{name: "浜田小学校", lat: 38.9579, lon: 139.8325},
];
locations.forEach(loc => {
L.marker([loc.lat, loc.lon]).addTo(map)
.bindPopup(loc.name);
});
function getCurrentPosition() {
return new Promise((resolve, reject) => {
if (!navigator.geolocation) {
reject(new Error('Geolocation is not supported by your browser'));
} else {
navigator.geolocation.getCurrentPosition(resolve, reject, {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
});
}
});
}
function findNearestLocation(userLat, userLon) {
let nearestLocation = locations[0];
let minDistance = Infinity;
locations.forEach(loc => {
const distance = Math.sqrt(
Math.pow(loc.lat - userLat, 2) + Math.pow(loc.lon - userLon, 2));
if (distance < minDistance) {
minDistance = distance;
nearestLocation = loc;
}
});
return nearestLocation;
}
async function showUserLocationAndRoute() {
try {
const position = await getCurrentPosition();
const userLat = position.coords.latitude;
const userLon = position.coords.longitude;
const userMarker = L.marker([userLat, userLon]).addTo(map)
.bindPopup('あなたの現在地').openPopup();
const nearest = findNearestLocation(userLat, userLon);
const routeLine = L.polyline([
[userLat, userLon],
[nearest.lat, nearest.lon]
], {color: 'red', weight: 3}).addTo(map);
map.fitBounds(routeLine.getBounds());
alert(`最も近い避難所は ${nearest.name} です`);
} catch (error) {
console.error('位置情報の取得に失敗しました:', error);
alert('位置情報の取得に失敗しました。ブラウザの設定を確認してください。');
}
}
showUserLocationAndRoute();
</script>
</body>
