如何在传单图中仅添加一个标记

问题描述 投票:10回答:2

我会在用户点击时在地图上添加标记。问题是我只需要一个标记,但是现在每当我单击地图时,都会添加一个新标记。我正在尝试将其删除,但没有任何反应:

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);
    });
javascript leaflet openstreetmap
2个回答
17
投票

您可以使用.on,而不是使用.once来捕获和处理事件。这样,事件将仅被捕获一次,处理程序将在此之后解除绑定。

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


2
投票

使用.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);
}

我没有测试它,但它至少应该使您朝正确的方向前进。

© www.soinside.com 2019 - 2024. All rights reserved.