Question

我正在使用nuxt-leaflet（与Vue2Leaflet一起使用），并且想知道如何在模板vue文件中的按钮（“显示工具提示”）上滑动后显示特定标记的工具提示吗？

<template>
  <div>
    <button @click="displayTooltipOfMarker(x)">Display tooltip</button>
    <div id="map-wrap" style="height: 500px; width:100%">
      <no-ssr>
        <l-map :zoom="10" :center="positionInitiale">
          <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
          <l-marker :icon="customIcon" :lat-lng="positionMarqueurHome"></l-marker>

          <l-marker
            v-for="marker in marqueurs"
            :key="marker.id"
            :lat-lng.sync="marker.position"
            @click="alert(marker)"
          >
            <l-popup :content="marker.tooltip"/>
            <l-tooltip :content="marker.tooltip"/>
          </l-marker>
        </l-map>
      </no-ssr>
    </div>
  </div>
</template>

有可能吗？

Answer 1

为了在外部事件（例如按钮就是您的情况）下打开/关闭Tooltip，可以考虑采用以下解决方案：

通过$refs属性访问Leaflet标记对象：

  <l-marker
    v-for="(marker, index) in markers"
    :key="index"
    ref="markersRef"
    :lat-lng="marker.position"
  >
         <l-popup :content="marker.name"/>
  </l-marker>

并将其保存到数组中：

mounted: function() {
    this.$nextTick(() => {
      this.markerObjects = this.$refs.markersRef.map(ref => ref.mapObject);
    });
 }

一旦触发了 external 事件（例如，单击按钮），工具提示就会像这样显示：

<button @click="displayTooltip(1)">Display</button>

displayTooltip(selectedIndex) {
  this.markerObjects[selectedIndex].openTooltip();
}

Here is a demo供参考

Vue2Leaflet：如何显示特定标记的工具提示

1 个答案: