在传单LayerGroup中的单个标记上触发事件

Question

Hi everyone (or should I say "anyone [who would read this...]?) :) 大家好（或者我应该说“任何人[谁会读这...]？）：）

I have tried to find the answer for two days but without success (most likely because I am a brand new user). 我试图寻找答案已经两天了，但是没有成功（很可能是因为我是一个全新的用户）。 I have on a leaflet map markers organized in a Layergroup so I can manage them with Layercontrol. 我在一个图层组中组织了一个传单地图标记，因此可以使用Layercontrol对其进行管理。 I would like that when a marker is clicked it triggers an event (in my case the creation of a circle representing a specific distance around this marker). 我希望单击标记时会触发一个事件（在我的情况下，将创建一个表示该标记周围特定距离的圆）。 I would like to manage that outside of the individual markers because I want also to set some different options for the radius of the circle according to the distance selected by the user. 我想在各个标记之外进行管理，因为我还想根据用户选择的距离为圆的半径设置一些不同的选项。

Below are different pieces of code showing what I mean : 以下是显示我的意思的不同代码段：

<!DOCTYPE html> 
<head> 
<title>Example</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css"/>
<style>

body {
    font-family: Helvetica;
    margin:0;
}

#map{
    position:absolute;
    top:0;
    bottom:0;
    width:100%;}

</style>
</head>

<body>
<div id="map"></div>
<script>

var sites = [
        {'loc':[42.2793869135936,9.53257201027757],'title':'TORRA A I CASELLI'},
        {'loc':[42.2713622720985,9.50678498185463],'title':'TOUR GIANDINELLI'},
        {'loc':[42.641518105666,9.00587322013212],'title':'TOUR DE LOSARI'},];

var map = new L.Map('map');
map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'));
map.setView([42.5,9.2210706018535],9);

var marks = new L.LayerGroup();
    for(i in sites) {
        var title = sites[i].title,
            loc = sites[i].loc,
            markersites = new L.Marker(new L.latLng(loc), {title: title});
        markersites.bindPopup('<strong>'+title+'</strong><br>');
        marks.addLayer(markersites);
    }
marks.addTo(map);

// for now it is all good, the next part is where I fail

marks.on('click',function(){
    console.log("Yeah!");
    new L.circle(this.getLatLng(), 10000, {color:'red', fillOpacity:0.3}).addTo(map)});

</script>
</body>
</html>

Any help would be much appreciated, thank you for your attention. 任何帮助将不胜感激，谢谢您的关注。

Cheers, Guillaume. 干杯，纪尧姆。

Answer 1

Since you are binding popups to your markers, a leaflet popup is going to open up in response to click events. 由于您是将弹出窗口绑定到标记，因此将打开一个单页弹出窗口以响应单击事件。 However, you can hook into those events by adding your own callbacks, too like: 但是，您也可以通过添加自己的回调来陷入这些事件，就像：

map.on('popupopen', function (e) {
 currentPopup = e.popup; // keep track of current popup
 // Do stuff with the popup or inspect it's marker here...
});

There are probably other ways to solve this with the leaflet api which is very flexible. 可能还有其他方法可以使用非常灵活的Leaflet API解决此问题。 This approach has worked for me in the past. 过去，这种方法对我有用。

Also at the time you are creating popups, you can bind additional info if necessary like this: 同样，在创建弹出窗口时，可以根据需要绑定其他信息，如下所示：

var content = '<b>'+ something + '</b>: '+ etc;
var popup = L.popup();
popup.setContent(content);
popup.markerId = 'some id';
layer.bindPopup(popup);

Answer 2

The fact you are using a LayerGroup is not part of your problem. 您正在使用LayerGroup的事实并不属于您的问题。

First, you have to attach a 'click' listener on all your markers. 首先，您必须在所有标记上附加一个“单击”侦听器。 This way, you can draw your circle when the popup is opened. 这样，您可以在打开弹出窗口时绘制圆。 You also must keep a reference to this circle in the javascript popup object. 您还必须在javascript弹出对象中保留对此圆的引用。

// keep a reference on the current active circle
var activeCircle = false;

markersites.on('click', function(e) {
   // marker clicked is e.target

   // remove active circle if any
   if(activeCircle) {
     map.removeLayer(activeCircle);
   }
   // draw a 10km circle with the same center as the marker 
   activeCircle = L.circle(e.target.getLatLng(), { radius: 10000 , color: "#ff0000" }).addTo(map);
       });

Example is here: http://plnkr.co/edit/OufPbq07ywEZh1N5VA8Y?p=preview 示例在这里： http : //plnkr.co/edit/OufPbq07ywEZh1N5VA8Y?p=preview

在传单LayerGroup中的单个标记上触发事件

问题描述

2 个解决方案

解决方案1
2 2016-12-12 21:24:03

解决方案2
2 已采纳 2016-12-13 06:41:30

在传单LayerGroup中的单个标记上触发事件

问题描述

2 个解决方案

解决方案1 2 2016-12-12 21:24:03

解决方案2 2 已采纳 2016-12-13 06:41:30

解决方案1
2 2016-12-12 21:24:03

解决方案2
2 已采纳 2016-12-13 06:41:30