传单打开多个弹出没有绑定到一个标记

Leaflet open multiple popups without binding to a marker

本文关键字：一个 单打开 绑定      更新时间：2023-09-26

我正忙着用传单写一个简单的地图实现，但是我遇到了一点障碍。我试图设置我的地图，并添加了一个自定义控件来显示标签(这将显示弹出窗口)基于一个复选框的选择。

我的自定义控件是这样的

        var checkBoxControl = L.Control.extend({
            options: {
                position: 'topright'
            },
            onAdd: function (map) {
                var container = L.DomUtil.create('input', 'leaflet-control');
                container.style.backgroundColor = 'white';
                container.id = 'labels_checkbox';
                container.style.width = '30px';
                container.style.height = '30px';
                container.label = "Labels";
                container.type = 'checkbox';
                container.onclick = function () {
                    var checkBox =  $("#labels_checkbox");
                    var checkBoxValue = checkBox[0];
                    var labelsChecked = checkBoxValue.checked;
                    var bounds = mymap.getBounds();
                    for (var i = 0; i < markers.length; i++) {
                        marker = markers[i].mark;
                        if (bounds.contains(marker.getLatLng())) {
                            var previewLabel = markers[i].previewLabel;
                            if (labelsChecked == true) {
                                console.log('previewLabel', previewLabel);
                                mymap.addLayer(previewLabel).fire('popupopen');
                            } else {
                                previewLabel.close();
                            }
                        }
                    }
                };
                return container;
            }
        });

我可以看到，根据我的控制台，它正在获取所有周围的标记，但地图不会打开这些标记?

是否有一种方法可以让我打开一个弹出框而不将其绑定到标记?

谢谢

您必须更改L.Map行为以防止自动关闭弹出窗口。

  // prevent a popup to close when another is open
  L.Map = L.Map.extend({
  openPopup: function (popup, latlng, options) { 
      if (!(popup instanceof L.Popup)) {
      var content = popup;
      popup = new L.Popup(options).setContent(content);
      }
      if (latlng) {
      popup.setLatLng(latlng);
      }
      if (this.hasLayer(popup)) {
      return this;
      }
      // NOTE THIS LINE : COMMENTING OUT THE CLOSEPOPUP CALL
      //this.closePopup(); 
      this._popup = popup;
      return this.addLayer(popup);        
  }
});

请看下面的例子

相关文章：