Leaflet l-marker-cluster 在集群更改时关闭打开的弹出窗口

Question

问题：当用户打开标记弹出窗口时，有时需要缩小，以便用户可以看到地图的更大部分。一旦选定的标记被添加到集群或集群被重新渲染，弹出窗口就会关闭，用户将无法看到哪个标记被打开

问题：如何防止这种情况并使弹出窗口保持打开状态，直到用户实际关闭弹出窗口？

我有以下设置：

• Nuxt2
• 宣传单张
• Leaflet.markercluster

我已经在不同的组件中构建了地图，因为我正在使用原子设计。以下是单独的组件：

地图.vue

<l-map id="myMap" ref="mapElement" :zoom="zoom" :center="center" class="gkn-map__map" :options="{scrollWheelZoom: !isMobile, touchZoom: isMobile, dragging: !isMobile}">
  <l-tile-layer :url="url" :attribution="attribution" />
  <MoleculeMapCluster :map-items="mapItems"/>
</l-map>

MapCluster.vue

<l-marker-cluster class="cluster" @animationend="animationEnded()">
  <MoleculeMapMarker v-for="(item, index) in mapItems" :key="index" :map-items="mapItems" :item="item" />
</l-marker-cluster>

MapMarker.vue

<l-marker v-for="(coord, index) in coordinates" :key="index" ref="marker" :lat-lng="coord">
  <MoleculeMapMarkerPopup :item="item" />
</l-marker>

MapMarkerPopup.vue

<l-popup class="map-popup" :auto-close="false">
  <!-- Customize the content of the popup here -->
  <AtomImage v-if="item.image" :src="item.image" class="img" :alt="item.title" data-testid="source-img" />
  <div class="content">
    CONTENT COMES HERE
  </div>
</l-popup>

上面剥离的代码结果如下：

一旦用户缩小，簇就会“重绘”，并且所有弹出窗口都会被地图关闭：

Answer 1

您可以结合使用 Leaflet 中的 @popupopen 事件和一些状态管理

向 poupup 元素添加引用

<l-marker v-for="(coord, index) in coordinates" :key="index" ref="marker" :lat-lng="coord">
  <MoleculeMapMarkerPopup :item="item" ref="popup" />
</l-marker>

使用状态变量来跟踪打开的弹出窗口

<template>
  <l-map id="myMap" ref="mapElement" @popupopen="handlePopupOpen" ...>
    <!-- other map components -->
  </l-map>
</template>

<script>
export default {
  data() {
    return {
      openPopupItem: null,
    };
  },
  methods: {
    handlePopupOpen({ popup }) {
      this.openPopupItem = popup.options.item;
    },
  },
};
</script>

在 MapMarkerPopup.vue 中接收“openPopupItem”作为道具

<template>
  <l-popup class="map-popup" :auto-close="false" :open="shouldOpenPopup">
    <!-- Popup content -->
  </l-popup>
</template>

<script>
export default {
  props: {
    item: Object,
    openPopupItem: Object,
  },
  data() {
    return {
      shouldOpenPopup: false,
    };
  },
  watch: {
    openPopupItem(newVal) {
      this.shouldOpenPopup = this.item === newVal;
    },
  },
};
</script>

最后我们将 openPopupItem 传递给它的子组件

<l-marker v-for="(coord, index) in coordinates" :key="index" ref="marker" :lat-lng="coord">
  <MoleculeMapMarkerPopup :item="item" :openPopupItem="openPopupItem" ref="popup" />
</l-marker>

:)