Leaflet中的标记，点击事件

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

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

- Jonathan García

---

var marker = L.marker([10.496093,-66.881935]).on('click', funciton(e) {alert(e.latlng);}); 这段代码能得到相同的结果吗？ - asifrc

我已经按照你提到的更改了，但是还是不起作用。 - Jonathan García

根据Chris在下面的帖子中所述，您可以将代码修改为var marker = L.marker([10.496093,-66.881935]).addTo(map).on('click', onClick);。 - Ash Catchem

为什么我们必须使用 addTo(map)？这会破坏 Leaflet Map Cluster :-( - Mawg says reinstate Monica

Answer 1

接受的答案是正确的。然而，我需要更清晰的解释，以便其他人也能明白：

Leaflet允许在其地图上几乎所有的操作上触发事件，包括标记。因此，在这种情况下，您可以像上面的问题中建议的那样创建一个标记：

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

然后创建 onClick 函数：

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

现在，无论何时你将鼠标悬停在该标记上，它都会触发当前纬度/经度的警报。

但是，你可以使用“单击”、“双击”等代替“悬停”，并且不需要警报纬度/经度，你可以在onClick函数的主体中执行任何其他操作:

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

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

- Chris

---

我认为这已经有所改变，现在您可以使用console.log(e.latlng)来显示一个包含纬度和经度的对象。 - Ryan Bobrowski

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

- Timo Sperisen

---

如何访问标记的属性，例如名称和其他变量？ - Nikhil VJ

@nikhilvj：这是一个扩展的jsfiddle，附带了一些额外的选项：https://jsfiddle.net/8282emwn/139/ - Timo Sperisen

Answer 3

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

当我们执行以下操作时似乎会出现问题：

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

e指向一个MouseEvent事件，它不能让我们直接获取标记对象。但是，有一个内置的this对象，奇怪的是，我们需要使用this.options来获取options对象，这样我们就可以传递任何需要的内容。在上面的例子中，我们可以通过选项传递一些ID，比如objid，然后在上面的函数中，可以通过调用this.options.objid来获取该值。

- Will

Answer 4

我找到了解决方案:

function onClick(e) {
   console.log(this.getLatLng());
}

使用标记的getLatLng()方法。

- Jonathan García

Answer 5

有点晚了，我在寻找标记点击事件的示例时发现了这个。原帖作者遇到的未定义错误是因为 onClick 函数在定义之前被引用了。将第二行和第三行交换一下就可以解决了。

- R.R. Sprinkhuizen

---

那是不正确的。请参阅Javascript中的变量提升 https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting - nikoshr