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

Posted 2023-02-23

【中文标题】如何在传单地图中仅添加一个标记

【英文标题】：How to add only one marker in leaflet map

【发布时间】：2014-12-22 19:35:55

【问题描述】：

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

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);
    );

【参考方案1】：

您可以使用.once，而不是使用.on 来捕获和处理事件。这样事件只会被捕获一次，然后处理程序将自行解除绑定。

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);

我没有测试它，但它至少应该让你朝着正确的方向前进。

【讨论】：

绝对没有理由引入另一个库，因为 Leaflet 有自己的绑定和解除绑定事件的方法：http://leafletjs.com/reference.html#events