传单中的标记,单击事件

Jon*_*cía 56 javascript leaflet

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)
Run Code Online (Sandbox Code Playgroud)

当我单击标记时,警报消息为:undefined

但如果我把它放在变量图中,它就可以了!(显示纬度和经度)

map.on('click', onClick); 
Run Code Online (Sandbox Code Playgroud)

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

Chr*_*ris 62

上述答案是正确的,并且是正确的.但是,类似于@snowgage我需要更清晰一些,所以万一其他人也这样做:

Leaflet允许事件在您在地图上执行的任何操作上触发.在这种情况下是一个标记.

所以你可以在上面的问题中创建一个标记:

L.marker([10.496093,-66.881935]).addTo(map).on('mouseover', onClick);
Run Code Online (Sandbox Code Playgroud)

然后创建onClick函数:

function onClick(e) {
    alert(this.getLatLng());
}
Run Code Online (Sandbox Code Playgroud)

现在,只要您将鼠标悬停在该标记上,它就会触发当前纬度/经度的警报.但是,你可以做'click','dblclick'等而不是'mouseover'而不是警告lat/long,你可以在onClick的主体中使用js来做任何你想要的事情.

以下是文档:http://leafletjs.com/reference.html#events

2018编辑 - 请注意下面的@ ryan-bobrowski评论.感谢瑞恩的抬头.

  • 我认为这已经改变了,现在你可以做`console.log(e.latlng)`来显示一个包含纬度和经度的对象. (2认同)

Tim*_*sen 18

这是一个函数调用的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);
}
Run Code Online (Sandbox Code Playgroud)

  • @nikhilvj:这是一个带有一些额外选项的扩展jsfiddle:https://jsfiddle.net/8282emwn/139/ (4认同)

Jon*_*cía 16

我找到了解决方案:

function onClick(e) {alert(this.getLatLng());}
Run Code Online (Sandbox Code Playgroud)

使用了标记的getLatLng()方法


Wil*_*ill 14

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

我们这样做时似乎:

marker.on('click', function(e) {...
Run Code Online (Sandbox Code Playgroud)

e指向MouseEvent 的点,它不允许我们到达标记对象.但是有一个this奇怪的内置对象,需要我们使用它this.options来到达options让我们传递任何需要的东西的对象.在上面的例子中,我们可以在一个选项中传递一些ID,让我们说objid在上面的函数中,我们可以通过调用来获取值:this.options.objid