web-dev-qa-db-ja.com

リーフレットマップにマーカーを1つだけ追加する方法

ユーザークリックで地図上にマーカーを追加しています。
問題は、マーカーが1つだけ必要なのに、マップをクリックするたびに新しいマーカーが追加されることです。
削除しようとしていますが、何も起こりません。

var marker;
    map.on('click', function (e) {
        map.removeLayer(marker)

        marker = new L.Marker(e.latlng, { draggable: true });
        marker.bindPopup("<strong>" + e.latlng + "</strong>").addTo(map);

        marker.on('dragend', markerDrag);
    });
javascriptleafletopenstreetmap
13
1110

イベントのキャプチャと処理に_.on_を使用する代わりに、_.once_を使用できます。このようにして、イベントは1回だけキャプチャされ、その後ハンドラーはバインドを解除します。

_map.on('click', function () {
    console.log('I fire every click');
});

map.once('click', function () {
    console.log('I fire only once');
});
_

ハンドラを自分でアンバインドする必要がある場合は、_.off_を使用できます。イベントメソッドのリファレンスを確認してください： http://leafletjs.com/reference.html#events

上記のコードが機能しない理由については、最初のクリックでマーカーmap.removeLayer(marker)を削除しようとしていますが、変数markerにL.Markerインスタンスが含まれていないため、地図はそれを削除できません。最初に定義されているかどうかを確認してから、削除する必要があります。

_var marker;
map.on('click', function (e) {
    if (marker) { // check
        map.removeLayer(marker); // remove
    }
    marker = new L.Marker(e.latlng); // set
});
_

これがPlunkerの実際の例です： http://plnkr.co/edit/iEcivecU7HGajQqDWzVH?p=preview

20
iH8

。off（） を使用して、クリック時イベントのバインドを解除します。

次のようになります。

var marker;
map.on('click', mapClicked);

function mapClicked(e) {
    map.off('click', mapClicked);
    map.removeLayer(marker)

    marker = new L.Marker(e.latlng, { draggable: true });
    marker.bindPopup("<strong>" + e.latlng + "</strong>").addTo(map);

    marker.on('dragend', markerDrag);
}

私はそれをテストしませんでしたが、少なくともあなたを正しい方向に導くはずです。

2
grim