Newer
Older
2024-Ikarashi / kappas.js
// かっぱ寿司の店舗リスト
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();