Question

我有一张地图，我可以用geoJSON加载标记。

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

该功能如下所示：

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块。与link var相关联的每个名称都附加了一个onclick事件，该事件将地图置于对应标记的中心。这一切都有效，除了我marker.openPopup()事件上的onclick电话。

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

我还在这里提供了代码的演示： http://jsfiddle.net/lmartins/z8wBW/

更新：更令我困惑的是，使用鼠标悬停相同的方法可以正常工作，也就是说，在上面的函数中，下面的代码会打开弹出窗口：

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

单击链接打开弹出窗口即可向地图冒泡并在弹出窗口后立即关闭弹出窗口。

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

1 个答案: