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

Question

我在对标记执行回调函数时遇到了问题(在我的例子中，它们是圆形和半圆形标记)。标记上下文菜单通过附加的特定于标记的操作扩展了 map 的上下文菜单。 map 上下文菜单回调工作正常。显示了标记附加菜单选项，但我无法执行相应的功能(例如获取标记的纬度和经度)。我尝试过的两种变体(见下文)的错误是“未捕获的类型错误:无法读取未定义的属性‘getLatLng’”。

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

标记是从外部 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”。在用户有机会从上下文菜单中进行选择和选项之前，也会触发事件。我需要的是在用户从上下文菜单中选择一些特定于标记的选项后触发事件。

变体 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) 时做错了什么。

因为我经常被卡住，所以我很乐意得到一些建议。

提前致谢!

编辑 在链接中，您可以找到变体 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 中进行测试.