Question

我使用带簇的Leaflet创建了地图。当您单击集群时，我想添加一个弹出窗口，它将显示集群内部标记名称的弹出列表。我找到了一个代码，它确实满足我的需求：一个列表弹出窗口，显示集群内标记的名称，当您单击弹出列表上的其他名称时，就会出现相关的标记弹出窗口。但是，当我将代码添加到项目中时，出现错误，“未定义引用错误onclick”，并且该函数无法运行。我研究了此错误，发现在我的javascript / HTML中以编写代码的方式使用onclick函数不是一个好习惯。我的问题是，如何重写脚本以按照我使用的示例的方式工作。这是指向我用来显示要完成的操作的示例的链接（该示例在下载并运行时有效，没有错误）-http://www.digital-geography.com/working-with-clusters-in-leaflet-increasing-useability/。我还包括了我的脚本。对于如何使这项工作的任何帮助将不胜感激。或者，我愿意以其他方式实现这一目标。预先感谢！

function openPopUp(id, clusterId){
map.closePopup(); //which will close all popups
map.eachLayer(function(layer){     //iterate over map layer
if (layer._leaflet_id == clusterId){         // if layer is markerCluster
layer.spiderfy(); //spiederfies our cluster
     }
});
map.eachLayer(function(layer){//iterate over map rather than clusters
if (layer._leaflet_id == id){// if layer is marker
layer.openPopup();
     }
});

markers.on('clusterclick', function(a){
if(a.layer._zoom == 6){
var myText = '<ul>';
for (feat in a.layer._markers){
myText += '<li><u onclick="openPopUp"(' + a.layer._markers[feat]._leaflet_id + ',' + a.layer._leaflet_id + ')>' + a.layer._markers[feat].feature.properties['cityName2'] + ',' + a.layer._markers[feat].feature.properties['cityName2'] + '</u></li>';
        }
myText += '</u>';
var popup = L.popup().setLatLng([a.layer._cLatLng.lat,a.layer._cLatLng.lng]).setContent(myText).openOn(map);

    }
})

Answer 1

因为.setContent 可以接受HTMLElement而不只是HTML字符串，所以您需要做的就是传递一个附加了侦听器的元素，而不是HTML字符串-使用createElement显式构造元素，并在要将侦听器附加到的元素上使用addEventListener：

markers.on('clusterclick', function(a) {
  if (a.layer._zoom !== 6) return;
  const ul = document.createElement('ul');
  a.layer._markers.forEach(({ _leaflet_id, feature }) => {
    const { cityName2 } = feature.properties;
    const li = ul.appendChild(document.createElement('li'));
    const u = li.appendChild(document.createElement('u'));
    u.addEventListener('click', () => openPopUp(_leaflet_id, a.layer._leaflet_id));
    u.textContent = cityName2 + ',' + cityName2;
  });
  const popup = L
    .popup()
    .setLatLng([a.layer._cLatLng.lat, a.layer._cLatLng.lng])
    .setContent(ul)
    .openOn(map);
})

如何在我的Javascript中重写onclick（）函数以调用函数

1 个答案: