diff --git a/map4.js b/map4.js index d9ae811..ce4dd8e 100644 --- a/map4.js +++ b/map4.js @@ -84,6 +84,9 @@ }).addTo(map); userMarker = L.marker([lat, lng], { icon: myIcon }).addTo(map); + + // ★ 自分のピンにも名前をつける(任意) + userMarker.bindPopup(`あなた(${currentUser})`); } // =============================== @@ -132,21 +135,21 @@ // 名前 li.append(row.user_name); - // =============================== - // ピンアニメ(安定パルス) - // =============================== + // ピンへズーム & パルスアニメ li.addEventListener("click", () => { if (row.lat && row.lng) { - // ピンへズーム map.setView([row.lat, row.lng], 16, { animate: true }); const mk = otherMarkers.find((m) => m._myDeviceId === row.device_id); if (mk && mk._icon) { - const wrapper = mk._icon.parentElement; // ← ピンの外枠 + const wrapper = mk._icon.parentElement; wrapper.classList.remove("pulse-marker"); void wrapper.offsetWidth; wrapper.classList.add("pulse-marker"); + + // ★ クリック時にもポップアップ表示 + mk.openPopup(); } } }); @@ -156,7 +159,7 @@ } // =============================== -// 他ユーザーの読み込み +// 他のユーザーの読み込み // =============================== async function showOtherUsers() { const { data, error } = await supa @@ -175,7 +178,7 @@ } } - // 自分が抜け落ちるのを防ぐ + // 自分が抜け落ちる対策 if (!latestByDevice[deviceId]) { latestByDevice[deviceId] = { user_name: currentUser, @@ -188,17 +191,23 @@ showMemberList(latestByDevice); - // ピン更新 + // ピン削除 otherMarkers.forEach((m) => map.removeLayer(m)); otherMarkers = []; + // 新しいピン作成 Object.values(latestByDevice).forEach((row) => { if (row.device_id === deviceId) return; if (row.lat == null || row.lng == null) return; - const mk = L.marker([row.lat, row.lng], { icon: otherIcon }).addTo(map); - mk._myDeviceId = row.device_id; + const mk = L.marker([row.lat, row.lng], { + icon: otherIcon, + }).addTo(map); + // ★ ピンに名前表示 + mk.bindPopup(`${row.user_name}`); + + mk._myDeviceId = row.device_id; otherMarkers.push(mk); }); } @@ -226,7 +235,7 @@ await saveMyLocation(lastLat, lastLng); await showOtherUsers(); - // 自分の位置を10秒ごとに更新 + // 自分の位置更新:10秒 setInterval(async () => { try { const pos = await getPosition(); @@ -236,7 +245,7 @@ } catch {} }, 10000); - // 他人の位置を2秒ごとに読み込む + // 他人の位置更新:2秒 setInterval(showOtherUsers, 2000); // 退出