Question

大家好（或者我应该说“任何人[谁会读这个...]？）：）

我试图找到答案两天但没有成功（很可能是因为我是一个全新的用户）。我有一个在Layergroup中组织的传单地图标记，因此我可以使用Layercontrol管理它们。我希望当点击一个标记时它会触发一个事件（在我的例子中，创建一个表示该标记周围特定距离的圆圈）。我想在单个标记之外进行管理，因为我还想根据用户选择的距离为圆的半径设置一些不同的选项。

以下是显示我的意思的不同代码：

<!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>

非常感谢任何帮助，谢谢你的关注。

干杯，纪尧姆。

Answer 1

由于您将弹出窗口绑定到标记，因此将打开一个小册子弹出窗口以响应单击事件。但是，您可以通过添加自己的回调来挂钩这些事件，如：

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

使用非常灵活的传单api可能还有其他方法可以解决这个问题。这种方法过去对我有用。

同样在您创建弹出窗口时，您可以根据需要绑定其他信息，如下所示：

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

Answer 2

您使用LayerGroup的事实不是您的问题的一部分。

首先，您必须在所有标记上附加“点击”侦听器。这样，您可以在弹出窗口时绘制圆圈。您还必须在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);
       });

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

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

2 个答案: