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

Question

我正在使用nuxt-传单(与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属性访问传单标记对象：

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

一旦触发外部事件(例如，按钮单击)，工具提示将显示如下：

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

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

这是一个演示供您参考