25 - 動的なマーカー追加・削除

学習内容: ユーザー操作やデータに基づいてマーカーを動的に追加・削除・更新します。

ポイント:

  • addTo() / remove() でマーカーを追加・削除
  • setLatLng() で位置を更新
  • マーカーの参照を配列で管理
  • 地図クリックでマーカーを追加

マーカーを追加

マーカー一覧 (0)

// マーカーを追加
function addMarker(name, lat, lng) {
    const marker = L.marker([lat, lng])
        .addTo(map)
        .bindPopup(name);

    markers.push({ id: Date.now(), name, marker });
    updateMarkerList();
}

// マーカーを削除
function removeMarker(id) {
    const index = markers.findIndex(m => m.id === id);
    if (index !== -1) {
        markers[index].marker.remove();
        markers.splice(index, 1);
        updateMarkerList();
    }
}

// マーカー位置を更新
marker.setLatLng([newLat, newLng]);