diff --git a/map4.js b/map4.js index f8be430..628c802 100644 --- a/map4.js +++ b/map4.js @@ -19,7 +19,7 @@ let currentGroup = ""; let currentUser = ""; let map; -let selfMarker = null; // 自分のピン(毎回再描画) +let selfMarker = null; // ← 自分用のピン(毎回再描画) let otherMarkers = []; let latestByDevice = {}; @@ -30,7 +30,7 @@ const DEFAULT_LNG = 139.752799; // =================================== -// URL パラメータ読み込み +// URL パラメータ // =================================== function loadParams() { const p = new URLSearchParams(location.search); @@ -42,16 +42,16 @@ } // =================================== -// ★ ラベル付き DivIcon(自分はプレミアムピン) +// ラベル付きカスタム DivIcon // =================================== function createLabeledIcon(name, type) { let pinImg = ""; if (type === "self") { - // ★ 自分 → プレミアムピン - pinImg = "https://cdn-icons-png.flaticon.com/512/1828/1828884.png"; + // ★ 自分のピン → Google公式の青い星ピン(CORS・高速・高画質) + pinImg = "https://maps.gstatic.com/mapfiles/kml/paddle/blu-stars.png"; } else { - // ★ 他人 → ライトグリーン + // ★ 他の人 → ライトグリーンのピン pinImg = "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png"; } @@ -92,7 +92,7 @@ } // =================================== -// ★ 自分のピンを毎回再描画(click を必ず生かす) +// ★ 自分のピンを毎回描き直す(click が死ぬ問題を完全排除) // =================================== function renderSelfMarker() { if (selfMarker) map.removeLayer(selfMarker); @@ -103,7 +103,7 @@ bubblingMouseEvents: true, }).addTo(map); - // ★ 1回タップで中央へスムーズ移動 + // ★ 1回のクリックで中央へ selfMarker.on("click", () => { map.setView([lastLat, lastLng], 16, { animate: true }); @@ -155,7 +155,6 @@ li.addEventListener("click", () => { if (row.device_id === deviceId) { - // ★ 自分のピンへ移動 map.setView([lastLat, lastLng], 16, { animate: true }); return; } @@ -176,7 +175,7 @@ } // =================================== -// 他ユーザー描画 +// 他ユーザーの描画 // =================================== async function showOtherUsers() { const { data } = await supa @@ -199,7 +198,7 @@ otherMarkers = []; Object.values(latestByDevice).forEach((row) => { - if (row.device_id === deviceId) continue; + if (row.device_id === deviceId) return; // 自分は処理しない const mk = L.marker([row.lat, row.lng], { icon: createLabeledIcon(row.user_name, "other"), @@ -241,23 +240,24 @@ lastLng = lng; initMap(lat, lng); - renderSelfMarker(); + renderSelfMarker(); // ← 初回描画 await saveMyLocation(lat, lng); await showOtherUsers(); - // ★ 自分の位置定期更新&毎回再描画 + // ★ 自分の位置更新(毎回再描画でクリックが絶対に死なない) setInterval(async () => { try { const pos = await getPosition(); lastLat = pos.latitude; lastLng = pos.longitude; - renderSelfMarker(); // ← これで絶対クリックが死なない + renderSelfMarker(); await saveMyLocation(lastLat, lastLng); } catch {} }, 8000); + // 他人更新 setInterval(showOtherUsers, 2000); const exit = document.getElementById("exitBtn");