Question

我正忙着使用传单编写一个简单的地图实现，但是我遇到了一些麻烦。我正在尝试设置我的地图，并添加了一个自定义控件来显示标签（将显示弹出窗口）基于复选框的选择。

我的自定义控件是这样的：

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

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

我有没有办法打开弹出窗口而不将其绑定到标记？

由于

Answer 1

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

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

请参阅此example

Leaflet打开多个弹出窗口而不绑定到标记

1 个答案: