1. ホーム
  2. jquery

[解決済み] リーフレット - 既存のマーカーを検索したり、マーカーを削除するには?

2022-02-05 23:44:39

質問

オープンソースの地図としてリーフレットを使い始めました。 http://leaflet.cloudmade.com/

以下のjQueryコードにより、地図クリック時に地図上にマーカーを作成することができます。

 map.on('click', onMapClick);
function onMapClick(e) {
        var marker = new L.Marker(e.latlng, {draggable:true});
        map.addLayer(marker);
        marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
};

しかし、現在のところ、既存のマーカーを削除したり、地図上に作成したすべてのマーカーを検索して配列に格納する方法は(私のコードには)存在しません。どなたか、この方法を理解する手助けをしていただけませんか?Leafletのドキュメントはこちらでご覧になれます。 http://leaflet.cloudmade.com/reference.html

解決方法は?

を関数の外に置く必要があります。そうすれば、後でアクセスすることができます。

var marker;
function onMapClick(e) {
        marker = new L.Marker(e.latlng, {draggable:true});
        map.addLayer(marker);
        marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
};

その後で

map.removeLayer(marker)

しかし、その方法では最新のマーカーしか持つことができません。毎回、varマーカーは最新のものによって消去されるからです。そこで、markerのグローバル配列を作成し、そこに自分のmarkerを追加するのもひとつの方法です。