Javascript 传单上下文菜单-如何在执行回调函数时传递标记引用（非geoJSON标记）

我在标记上执行回调函数时遇到问题（在我的例子中，它们是圆形和半圆标记）。标记上下文菜单使用其他特定于标记的操作扩展地图的上下文菜单。映射上下文菜单回调正常工作。标记显示了其他菜单选项，但我无法执行相应的功能（例如获取标记的Lat和Lon）。我尝试的两个变体（见下文）中的错误都是“UncaughtTypeError:无法读取undefined的属性'getLatLng'

下面显示了我正在使用的代码

标记从外部JS文件创建并存储在图层组中

变体1-使用上下文菜单文档中建议的事件“contextmenu.show”

使用圆标记创建图层组：

for(i in sites) {
var title = sites[i].ID,    
    loc = sites[i].loc,     
    object = sites[i].Type,
    marker = new L.circle(new L.latLng(loc), {radius: radsiteinit+50,color: 'gold', weight: 3, title: title, pane: "sitePane",
           contextmenu: true,contextmenuItems: [{text: 'Show Charts',index:0}, {separator: true, index: 1}]} ).
           bindPopup(object+': '+ title ).on('click', onClick);

    layerSites.addLayer(marker);
}

“contextmenu.show”事件：

如上所述，生成的错误是“UncaughtTypeError:无法读取未定义的属性'getLatLng'。在用户有机会从上下文菜单中选择和选项之前，也会触发该事件。我需要的是在用户从上下文菜单中选择一些特定于标记的选项后触发事件

变量2-具有回调函数的定义

创建带有圆圈标记的图层组-此处与上面的不同之处在于，我添加了回调函数，即上下文菜单定义：

for(i in sites) {
var title = sites[i].ID,    
    loc = sites[i].loc,     
    object = sites[i].Type,
    marker = new L.circle(new L.latLng(loc), {radius: radsiteinit+50,color: 'gold', weight: 3, title: title, pane: "sitePane",
           contextmenu: true,contextmenuItems: [{text: 'Show Charts',callback:showCharts,index:0}, {separator: true, index: 1}]} ).
           bindPopup(object+': '+ title ).on('click', onClick);

    layerSites.addLayer(marker);
}

function showCharts(e) {

    var latlngs = e.relatedTarget.getLatLng();

};

回调函数定义：

for(i in sites) {
var title = sites[i].ID,    
    loc = sites[i].loc,     
    object = sites[i].Type,
    marker = new L.circle(new L.latLng(loc), {radius: radsiteinit+50,color: 'gold', weight: 3, title: title, pane: "sitePane",
           contextmenu: true,contextmenuItems: [{text: 'Show Charts',callback:showCharts,index:0}, {separator: true, index: 1}]} ).
           bindPopup(object+': '+ title ).on('click', onClick);

    layerSites.addLayer(marker);
}

function showCharts(e) {

    var latlngs = e.relatedTarget.getLatLng();

};

这里也有同样的错误

我对JavaScript非常陌生，所以当我试图将marker的引用传递给函数（变量2）或事件（变量1）时，我猜我做错了什么

因为我经常陷入困境，我希望能得到一些建议

提前谢谢你

编辑 在该链接中，您可以找到变体2的JS Bin示例： 一个可能的解决方案：

var circle = L.circle(new L.LatLng(-36.79, 174.7), {
  radius: 400,
  weight: 10,
  contextmenu: true,
  contextmenuItems: [{
    text: 'Circle 1',
    callback: function() {
      showCharts(circle);
    }
  }]
}).addTo(map);


function showCharts(circle) {
  console.log(circle.getLatLng().toString());
}

要点：

• 声明一个变量并为其指定圆标记（

  var circle=L.circle（…）

  ）
• 将

  回调

  属性设置为匿名函数。在该函数中，执行

  showCharts

  方法，并将

  circle

  变量作为参数传递给它（

  showCharts（circle）

  ）

下面是一个示例

更新 对于多个圆标记，可以执行以下操作：

for (var i in sites) {
  var title = sites[i].Site,
    loc = sites[i].loc,
    marker = new L.circle(new L.latLng(loc), {
      radius: 100,
      contextmenu: true
    }).bindPopup('Site: ' + title);

  marker.options.contextmenuItems = [{
    text: 'Show Charts',
    callback: (function(marker) {
      return function() {
        showCharts(marker)
      }
    })(marker)
  }]

  layerSites.addLayer(marker);
}

代码使用闭包来跟踪循环中正确的标记变量

---

在中进行测试。

您是否可以为JSBin或JSFIDLE提供再现错误所需的最少代码量？谢谢，Iavor！你的例子很有效。但这与我的目标不同。在我的例子中，我在几个图层组中加载了数千个标记，因此我没有为每个标记保留单独的变量。在我的文章的编辑中，我按照你的建议放了一个JS-Bin示例（我是第一次使用它，这是一个很棒的服务：）是的，JSBin非常有用，令人惊讶！它很有魅力。你成就了我的一天：）我相信你的工作方案也会让其他人受益。太棒了！我很高兴它起作用了，我让你开心了。祝你的Ivaylo项目好运！