Javascript 在传单图层组中的单个标记上触发事件_Javascript_Html_Leaflet

Javascript 在传单图层组中的单个标记上触发事件

javascript html leaflet

Javascript 在传单图层组中的单个标记上触发事件,javascript,html,leaflet,Javascript,Html,Leaflet,大家好（或者我应该说“任何人（谁会读这个…？）：）我花了两天的时间试图找到答案，但没有成功（很可能是因为我是一个全新的用户）。我在传单地图上有一个图层组中组织的标记，因此我可以使用图层控制来管理它们。我希望当单击标记时，它会触发一个事件（在我的例子中，创建一个表示此标记周围特定距离的圆）。我希望在单个标记之外管理该距离，因为我还希望根据用户选择的距离为圆的半径设置一些不同的选项下面是显示我的意思的不同代码片段： <!DOCTYPE html> <head> <

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

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

下面是显示我的意思的不同代码片段：

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


例子
身体{
字体系列：Helvetica；
保证金：0；
}
#地图{
位置：绝对位置；
排名：0；
底部：0；
宽度：100%；}
变量站点=[
{'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=新的L.map（'map'）；
addLayer（新的L.TileLayer（'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'）；
地图.setView（[42.5,9.2210706018535]，9）；
变量标记=新的L.LayerGroup（）；
适用于（现场中的i）{
var title=sites[i]。title，
loc=站点[i]。loc，
markersites=newl.Marker（newl.latLng（loc），{title:title}）；
markersites.bindPopup（“”+title+”
”）；
marks.addLayer（markersites）；
}
标记。添加到（地图）；
//现在一切都很好，下一部分就是我失败的地方
标记.on（'click'，function（））{
console.log（“耶！”）；
新的L.circle（this.getLatLng（），10000，{color:'red'，fillOpacity:0.3}）.addTo（map）}）；

任何帮助都将不胜感激，谢谢您的关注

干杯，

Guillaume。

由于您要将弹出窗口绑定到标记，将打开一个单张弹出窗口以响应单击事件。但是，您可以通过添加自己的回调来连接到这些事件，如：

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);

var content=''+something+'：''+etc；
var popup=L.popup（）；
popup.setContent（content）；
popup.markerId='some id'；
图层绑定弹出窗口（弹出窗口）；

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

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);

var content=''+something+'：''+etc；
var popup=L.popup（）；
popup.setContent（content）；
popup.markerId='some id'；
图层绑定弹出窗口（弹出窗口）；

您使用的图层组不是问题的一部分

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

示例如下：

您使用的图层组不是问题的一部分

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

示例如下：

如果我的答案对您不适用，请告诉我。我对您的问题进行了升级，因为您提供了一个实用的传单示例，非常容易打开和尝试！我很高兴您这么说！我在发帖时犹豫了一下，因为我的问题看起来太大，我的代码也太复杂了。：）如果我的回答对你不起作用，请告诉我。我对你的问题投了更高的票，因为你提供了一个实用的传单示例，非常容易打开和实验！我很高兴你这么说！我在发帖时犹豫了一下，因为可能我的问题看起来太大了，我的代码也太复杂了。：）好的，确实有效，谢谢！不过我想保持圆圈，只要我没有点击其他标记（即使我关闭弹出窗口）。这是因为我计划通过control.layer面板管理带有这些圆圈的图层。我目前正在考虑实现这一点，但如果您有其他信息，则非常欢迎。在这种情况下，您只需保留您创建的上一个圆圈的参考。请参阅更新的答案和示例。欢迎您接受如果有帮助的话，答案是。是的，谢谢。我还有最后一个问题：我想把这些圆作为一个单独的层来管理，然后我觉得需要在定义标记的函数之外创建它们。你知道怎么做吗？再次感谢你已经给我的答案。对不起，我不确定我是否理解。你知道怎么做吗我会用一个例子或一张图片开始一个新的主题。好的，它确实有效，谢谢！但是我想保持圆圈，只要我没有点击另一个标记（即使我关闭了弹出窗口）。这是因为我计划通过control.layer面板管理带有这些圆圈的图层。我目前正在考虑实现这一点，但如果您有其他信息，则非常欢迎。在这种情况下，您只需保留您创建的上一个圆圈的参考。请参阅更新的答案和示例。欢迎您接受如果有帮助的话，答案是。是的，谢谢。我还有最后一个问题：我想作为一个单独的层来管理这些圆，那么在我看来需要在定义标记的函数之外创建它们。你知道怎么做吗？再次感谢你的answe