jquery leafletjs - marker.bindPopup -保持所有弹出窗口打开

jhkqcmku 于 2023-02-12 发布在 jQuery

关注(0)|答案(3)|浏览(658)

我有一些困难，保持所有的弹出窗口打开传单。
我在a循环中使用了以下代码来向LayerGroup添加标记（ajax自动更新）。

var marker = L.marker([value.position.lat, value.position.lon],options).addTo(markers);
allpoints.push([value.position.lat, value.position.lon]);
marker.bindPopup("InfoWindow",{closeOnClick:false,closeButton:false}).openPopup();

它工作得很好，除了它只保持最后一个弹出窗口打开。我想保持它们都打开。我确实在这里找到了一篇文章（stackoverflow）关于用不同的标记名这样做，但是我在一个循环中有这个。我确实尝试过把L.标记放入一个数组中，但是leaflet不喜欢这样。
有什么想法吗？

jquery

来源：https://stackoverflow.com/questions/21654126/leafletjs-marker-bindpopup-keep-all-popups-open

3条答案

按热度按时间

yrwegjxp1#

您需要覆盖Leaflet Map上的openpopup方法，将其替换为该方法的副本，仅注解掉调用.closePopup（）的行;
在你的页面上你可以添加

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

http://jsfiddle.net/yVLJf/37/
您可以在此处找到原始的Leaflet openPopup方法：https://github.com/Leaflet/Leaflet/blob/1acffc5a3d31010b7d613382ab2a5830ecee5dd5/src/layer/Popup.js#L290

赞(0）回复(0）举报 2023-02-12

dgenwo3n2#

如果你想一次渲染所有的弹出窗口，这个想法是将弹出窗口渲染为单独的层。你不能在marker.bindPopup（Popup）之后使用marker.openPopup（），因为Leaflet会关闭当前打开的其他弹出窗口。
我在我的React应用程序中有相同的任务。
在本例中，.API =L.map（this.map）;

drawMarkers() {
const {points, keepAllPopupsOpen} = this.props;

this.markers.clearLayers();

points.forEach(point => {
  const hasPopup = point.title;
  const marker = this.createMarker(point, keepAllPopupsOpen);
  this.markers.addLayer(marker);

  if (hasPopup) {
    const popup = this.createPopup(point, keepAllPopupsOpen);

    if (keepAllPopupsOpen) {
      this.api.addLayer(popup);
    } else {
      marker.bindPopup(popup);
    }
  }
});
}

使用禁用参数禁用弹出窗口中的关闭按钮，并防止在弹出窗口外点击时关闭弹出窗口：

createPopup(point, disabled = false) {
    const {title, location} = point;

    const popup = L.popup({
      closeOnClick: !disabled,
      closeButton: !disabled,
      offset: [-22, -38]
    })
    .setLatLng(location)
    .setContent(title);

    return popup;
  }

赞(0）回复(0）举报 2023-02-12

rlcwz9us3#

只需将此选项添加到bindPopup方法
.bindPopup（汽车.汽车名称，{自动关闭：假，单击时关闭：假}）
它将覆盖默认行为检查官方文档https://leafletjs.com/reference.html#popup-option

赞(0）回复(0）举报 2023-02-12