传单中的标记，单击事件

Question

var map = L.map('map');
var marker = L.marker([10.496093,-66.881935]).on('click', onClick);
function onClick(e) {alert(e.latlng);}
marker.addTo(map)

当我点击标记时，警报消息是：未定义

但如果我把它放在变量映射中，它就可以了！ （显示经纬度）

map.on('click', onClick); 

有人知道为什么它在标记中不起作用吗？

Answer 1

接受的答案是正确的。但是，我需要更清楚一点，以防其他人也这样做：

Leaflet 允许事件触发您在其地图上所做的几乎任何事情，在本例中为标记。

所以您可以按照上述问题的建议创建一个标记：

L.marker([10.496093,-66.881935]).addTo(map).on('mouseover', onClick);

然后创建onClick函数：

function onClick(e) {
    alert(this.getLatLng());
}

现在，只要您将鼠标悬停在该标记上，它就会触发当前纬度/经度的警报。

但是，您可以使用“click”、“dblclick”等代替“mouseover”，也可以使用 onClick 的主体来执行任何其他操作，而不是提醒 lat/long：

L.marker([10.496093,-66.881935]).addTo(map).on('click', function(e) {
    console.log(e.latlng);
});

这是文档：https://leafletjs.com/reference.html#map-event

Answer 2

这是一个带有函数调用的 jsfiddle： https://jsfiddle.net/8282emwn/

var marker = new L.Marker([46.947, 7.4448]).on('click', markerOnClick).addTo(map);

function markerOnClick(e)
{
  alert("hi. you clicked the marker at " + e.latlng);
}

Answer 3

我找到了解决办法：

function onClick(e) {alert(this.getLatLng());}

使用了标记的getLatLng()方法

Answer 4

其他相关信息： 一个常见的需求是将标记所代表的对象的 ID 传递给一些 ajax 调用，以便从服务器获取更多信息。

似乎当我们这样做时：

marker.on('click', function(e) {...

e 指向一个 MouseEvent，它不允许我们访问标记对象。但是有一个内置的this 对象，奇怪的是，它要求我们使用this.options 来获取options 对象，这让我们可以传递任何我们需要的东西。在上述情况下，我们可以在选项中传递一些 ID，比如objid，然后在上面的函数中，我们可以通过调用来获取值：this.options.objid

Answer 5

聚会有点晚了，在寻找标记点击事件的示例时发现了这一点。原始发布者得到的未定义错误是因为在定义之前引用了 onClick 函数。交换第 2 行和第 3 行，它应该可以工作。