leaflet - 无法以编程方式打开弹出窗口

Question

我有一张 map ，我在上面加载带有 geoJSON 的标记。

本地图加载时，我运行一个函数 buildVisibleSys，它负责在 map 上构建当前可见系统的列表。

该函数如下所示:

buildVisibleSys = function() {
  var bounds, visibleSys;
  visibleSys = [];
  bounds = map.getBounds();
  return systemLocations.eachLayer(function(marker) {
    var link;
    link = onScreenEl.appendChild(document.createElement('a'));
    link.href = '#';
    link.id = "marker" + marker._leaflet_id;
    link.innerHTML = marker.options.title;
    link.onclick = function() {
      marker.openPopup();
      map.panTo(marker.getLatLng());
    };
  });
};
map.on('load', buildVisibleSys);

在这个函数中，对于每一层，我都会获取一些数据并使用每个标记的名称构建一个 html block 。这些名称中的每一个都与 link 变量相关联，附加了一个 onclick 事件，该事件将使 map 在对应的标记上居中。除了 marker.openPopup() 调用之外，这一切都有效，我也对该 onclick 事件进行了调用。

知道我在这里缺少什么吗？

我还在此处制作了代码演示: http://jsfiddle.net/lmartins/z8wBW/

更新:更让我困惑的是，使用 mouseover 时，相同的方法可以正常工作，也就是说，在上面的函数中，以下代码确实打开了弹出窗口:

   link.onmouseover = function(ev) {
      marker.openPopup();
      marker._icon.classList.add('is-active');
    };

Answer 1

将您的链接处理程序更改为

link.onclick = function(e) {
  marker.openPopup();
  map.panTo(marker.getLatLng());
  e.stopPropagation();
  e.preventDefault();
};

点击打开弹出窗口的链接会冒泡到 map 并在弹出窗口打开后立即关闭。