// かっぱ寿司の店舗リスト
const stores = [
{ name: "かっぱ寿司 鶴岡店", lat: 38.735242, lng: 139.819540 },
{ name: "かっぱ寿司 酒田店", lat: 38.918944, lng: 139.855681 }
];
const maxDistance = 500;
let map;
let userMarker;
// 地図を表示する
function initMap() {
map = L.map('map').setView([38.8, 139.84], 11);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// 店舗のマーカーを追加
stores.forEach(store => {
L.marker([store.lat, store.lng]).addTo(map).bindPopup(store.name);
});
// 現在地を「かっぱ寿司 鶴岡店」に固定
const fakeLat = 38.735242;
const fakeLng = 139.819540;
userMarker = L.marker([fakeLat, fakeLng], {
icon: L.icon({
iconUrl: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png',
iconSize: [32, 32],
iconAnchor: [16, 32]
})
}).addTo(map).bindPopup("あなたの現在地(鶴岡店)").openPopup();
map.setView([fakeLat, fakeLng], 14);
}
// 「スタンプをチェックする」ボタンが押されたときの処理
document.getElementById("checkBtn").addEventListener("click", checkLocation);
// 現在地と各店舗の距離をチェック
function checkLocation() {
// テスト用:現在地を鶴岡店に固定
const lat = 38.735242;
const lng = 139.819540;
if (userMarker) {
userMarker.setLatLng([lat, lng]);
}
let resultHTML = "";
stores.forEach(store => {
const distance = getDistance(lat, lng, store.lat, store.lng);
if (distance <= maxDistance) {
resultHTML += `<p class="got">${store.name}のスタンプをゲット!(約${Math.round(distance)}m)</p>`;
saveStamp(store.name);
} else {
resultHTML += `<p>${store.name}は近くにありません(約${Math.round(distance)}m)</p>`;
}
});
document.getElementById("result").innerHTML = resultHTML;
showStamps();
}
// 距離を計算(Haversine式)
function getDistance(lat1, lng1, lat2, lng2) {
const R = 6371000;
const toRad = angle => angle * Math.PI / 180;
const dLat = toRad(lat2 - lat1);
const dLng = toRad(lng2 - lng1);
const a =
Math.sin(dLat / 2) ** 2 +
Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *
Math.sin(dLng / 2) ** 2;
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
return R * c;
}
// スタンプを保存
function saveStamp(name) {
const stamps = JSON.parse(localStorage.getItem("stamps") || "[]");
if (!stamps.includes(name)) {
stamps.push(name);
localStorage.setItem("stamps", JSON.stringify(stamps));
}
}
// スタンプ帳を表示
function showStamps() {
const stamps = JSON.parse(localStorage.getItem("stamps") || "[]");
const list = document.getElementById("stampList");
list.innerHTML = "";
stamps.forEach(name => {
const li = document.createElement("li");
li.textContent = name;
list.appendChild(li);
});
}
// 初期化
initMap();
showStamps();