javascript 传单中的标记,单击事件

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16927793/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 06:28:56  来源:igfitidea点击:

Marker in leaflet, click event

javascriptleaflet

提问by Jonathan García

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?

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

采纳答案by Jonathan García

I found the solution:

我找到了解决方案:

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

used the method getLatLng() of the marker

使用了标记的方法 getLatLng()

回答by Chris

The accepted answer is correct. However, I needed a little bit more clarity, so in case someone else does too:

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

Leaflet allows events to fire on virtually anything you do on its map, in this case a marker.

Leaflet 允许事件触发您在其地图上所做的几乎任何事情,在这种情况下是一个标记。

So you couldcreate a marker as suggested by the question above:

因此,您可以按照上述问题的建议创建一个标记:

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

Then create the onClick function:

然后创建 onClick 函数:

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

Now anytime you mouseover that marker it will fire an alert of the current lat/long.

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

However, you could use 'click', 'dblclick', etc. instead of 'mouseover' and instead of alerting lat/long you can use the body of onClick to do anything else you want:

但是,您可以使用 'click'、'dblclick' 等代替 'mouseover',并且可以使用 onClick 的主体来执行任何您想做的事情,而不是提醒经纬度:

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

Here is the documentation: http://leafletjs.com/reference.html#events

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

回答by Timo Sperisen

Here's a jsfiddle with a function call: https://jsfiddle.net/8282emwn/

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

回答by Will

Additional relevant info: A common need is to pass the ID of the object represented by the marker to some ajax call for the purpose of fetching more info from the server.

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

It seems that when we do:

似乎当我们这样做时:

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

The epoints to a MouseEvent, which does not let us get to the marker object. But there is a built-in thisobject which strangely, requires us to use this.optionsto get to the optionsobject which let us pass anything we need. In the above case, we can pass some ID in an option, let's say objidthen within the function above, we can get the value by invoking: this.options.objid

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

回答by R.R. Sprinkhuizen

A little late to the party, found this while looking for an example of the marker click event. The undefined error the original poster got is because the onClick function is referred to before it's defined. Swap line 2 and 3 and it should work.

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