选择要在传单中显示的图层时如何防止打开弹出窗口？

Question

我正在从事一个带有传单的项目，其中显示了三层

每当您想显示该层的所有标记时，您都可以启用或禁用。 每个标记都有一个弹出窗口，当您单击该标记时它会打开

我遇到的问题是，当您点击任何图层并激活它时，标记会显示其弹出窗口。

有没有办法在激活图层时不打开它？至少保持它关闭并在您单击它时打开它？

谢谢同事！

Answer 1

您可以修改向地图添加标记的代码。

一种解决方案是向每个标记添加 mouseover 和 mouseout 事件侦听器。 mouseover 事件打开弹出窗口，mouseout 关闭它。 因此，这使得弹出窗口仅在您将鼠标悬停在标记上时打开，而不是在您激活图层时打开，您可以从这里开始进行相应的修改。

这是一段代码作为参考：

var layer1 = L.layerGroup();

for (var i = 0; i < markers1.length; i++) {
  var marker = L.marker(markers1[i].latlng, {
    icon: markers1[i].icon
  });
  marker.bindPopup(markers1[i].popup);
  marker.on('mouseover', function (e) {
    this.openPopup();
  });
  marker.on('mouseout', function (e) {
    this.closePopup();
  });
  marker.addTo(layer1);
}

var layer2 = L.layerGroup();

for (var i = 0; i < markers2.length; i++) {
  var marker = L.marker(markers2[i].latlng, {
    icon: markers2[i].icon
  });
  marker.bindPopup(markers2[i].popup);
  marker.on('mouseover', function (e) {
    this.openPopup();
  });
  marker.on('mouseout', function (e) {
    this.closePopup();
  });
  marker.addTo(layer2);
}

var layer3 = L.layerGroup();

for (var i = 0; i < markers3.length; i++) {
  var marker = L.marker(markers3[i].latlng, {
    icon: markers3[i].icon
  });
  marker.bindPopup(markers3[i].popup);
  marker.on('mouseover', function (e) {
    this.openPopup();
  });
  marker.on('mouseout', function (e) {
    this.closePopup();
  });
  marker.addTo(layer3);
}

var map = L.map('map', {
  layers: [layer1, layer2, layer3]
});

var baseLayers = {
  "Layer 1": layer1,
  "Layer 2": layer2,
  "Layer 3": layer3
};

L.control.layers(baseLayers).addTo(map);