Marker in leaflet, click event

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)

When I do click in the marker, the alert message is: undefined

But if I put it in the variable map, it works! (shows latitude and longitude)

map.on('click', onClick);

Does someone know why it doesn't work in the marker?

168612 次浏览
小开
最佳答案

我找到了解决办法:

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

使用标记的 getLatLng ()方法

小开

接受的答案是正确的。然而，我需要更清晰一点，以防其他人也这么做:

传单允许事件发生在你在它的地图上做的任何事情上，在这种情况下是一个标记。

因此，按照上面的问题，你可以创建一个 可以标记:

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

然后创建 onClick 函数:

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

现在，任何时候你鼠标经过那个标记，它都会发出当前 lat/long 的警报。

然而，你可以使用“ click”，“ dblclick”等代替“ mouseover”，也可以使用 onClick 的主体来做你想做的任何事情:

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

以下是文档: https://leafletjs.com/reference.html#map-event

小开

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

似乎当我们这样做的时候:

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

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

小开

下面是一个带有函数调用的 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);
}
小开

来得有点晚了，在寻找标记点击事件的例子时发现了这个。原始海报得到的未定义错误是因为 onClick 函数在定义之前被引用。交换线2和3，它应该工作。


提交答案