Leaflet Contextmenu - 如何在执行回调函数时传递标记引用（非geoJSON标记）

Question

我在对标记执行回调函数时遇到问题（在我的例子中，它们是圆形和半圆形标记）。标记上下文菜单通过附加的特定于标记的操作扩展了地图的上下文菜单。地图上下文菜单回调工作正常。显示了标记附加菜单选项，但我无法执行相应的功能（例如获取标记的纬度和经度）。我尝试的两种变体（见下文）的错误是 "Uncaught TypeError: Cannot read property 'getLatLng' of undefined".

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

标记从外部 JS 文件创建并存储在 layerGroup 中。

变体 1 - 按照 contextMenu 文档中的建议使用事件 "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" 事件：

    mymap.on('contextmenu.show', function (event) {

    var latlngs = event.relatedTarget.getLatLng();

});

如上所述产生的错误是"Uncaught TypeError: Cannot read property 'getLatLng' of undefined"。在用户有机会从上下文菜单中选择 select 和选项之前，也会触发事件。我需要的是在用户 select 从上下文菜单中选择一些特定于标记的选项后触发事件。

变体 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();

};

同样的错误。

我是 JavaScript 的新手，所以我想我在尝试将标记的引用传递给函数 (var. 2) 或事件 (var. 1) 时做错了什么。

因为我经常被卡住，希望能得到一些建议。

提前致谢！

编辑在 link 中，您可以找到变体 2 的 JS Bin 示例： JS Bin Example

Answer 1

可能的解决方案：

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(...))。
将 callback 属性设置为匿名函数。在该函数中，执行您的 showCharts 方法并将 circle 变量作为参数 (showCharts(circle)).

这是一个带有工作示例的 JSBin。

更新

对于多个圆形标记，您可以这样做：

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

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

在 this JSBin 中进行测试。

Leaflet Contextmenu - 如何在执行回调函数时传递标记引用（非geoJSON标记）

Leaflet Contextmenu - How to pass a marker reference when executing a callback function (non-geoJSON marker)

javascript

contextmenu

leaflet

更新