Объединить Vue2Leaflet и BootstrapVue - PullRequest
Новая
       25

Объединить Vue2Leaflet и BootstrapVue

0 голосов
/ 27 апреля 2020

Я изо всех сил пытаюсь понять, как различные компоненты в Vue могут взаимодействовать друг с другом. Например, я помещаю маркер на карту с помощью Vue2Leaflet, а затем хочу добавить к нему Popover с BootstrapVue. К сожалению, Popover не срабатывает. С другими элементами, такими как картинки и др. c. Поповер легко срабатывает. Это мой код в шаблоне: 

<template>
  <div id='map' style="position: relative; z-index: 0">
    <l-map
    :zoom="zoom"
    :center="center"
    :maxZoom="maxZoom"
    :minZoom="minZoom"
    :options="{zoomControl: false}"
    :maxBounds="[[-75,-400],[90,400]]"
    style="height: 100%; width: 100%;">

      <l-tile-layer
        :url="basemap_url"
        :attribution="attribution"
        style="height: 100%; width: 100%;"
      />

      <l-tile-layer
        :url="labels_url"
        :attribution="attribution"
        style="height: 100%; width: 100%;"
      />

      <l-marker :lat-lng="[47.413220, -1.199482]" id='eventMarker'>
      </l-marker>
      <LMigrationLayer/>

      <l-control-zoom position="bottomleft"  ></l-control-zoom>
    </l-map>
    <b-popover target="eventMarker" triggers="hover" placement="top" style="position:relative; z-index: 2;">
      <template v-slot:title>Popover Title</template>
      I am popover <b>component</b> content!
    </b-popover>
  </div>
</template>

Все операции импорта выполнены правильно и в консоли нет ошибок. Как и с другими элементами, не относящимися к Leaflet, все работает отлично. В документации к Bootstrap Popover говорится, что целью может быть String, HTMLElement, SVGElement, Function или Object, но я не совсем понимаю, как я могу установить другие цели, кроме String, которые, очевидно, не работают: /

Спасибо за помощь!

...