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 для внешнего события (например, кнопка в вашем случае), можно рассмотреть текущее решение:

получить доступ к объекту маркера Leaflet через $refs attribute:

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

Вот демо для вашей справки