Question

动态添加标记时，如何将弹出窗口设置为最初打开？

<v-map>
  <v-marker v-for="item in markers" :key="item.id" :lat-lng="item.latlng">
    <v-popup :content="item.content"></v-popup>
  </v-marker>
</v-map>

此处示例：http://jsfiddle.net/manelclos/f7dksf2m/

Answer 1

nikoshr解决方案不适用于1.4版。尝试以下方法：

<l-map>
  <l-marker @add="$nextTick(() => $event.target.openPopup())">
    <l-popup></l-popup>
  </l-marker>
</l-map>

https://jsfiddle.net/hponcede/839nzgy7/4/

Answer 2

Vue2leaflet reroutes Leaflet events通过l-[leaflet_event]处理程序向Vue发送：

如何绑定Vue2Leaflet组件的事件？

所有事件绑定都可以对名为l-[leaflet_event]的事件进行，其中   [leaflet_event]是传单文档中的事件名称。

默认情况下打开弹出窗口的一种可能方法是将标记的openPopup方法绑定到其add事件。

例如，使用内联处理程序：

<v-map :zoom="zoom" :center="center">
    <v-marker v-for="item in markers" :key="item.id" :lat-lng="item.latlng"
        @l-add="$event.target.openPopup()"
    >
        <v-popup :content="item.content"></v-popup>
    </v-marker>
</v-map>

更新的小提琴http://jsfiddle.net/f7dksf2m/2/和演示

＆＃13;

Vue.component('v-map', Vue2Leaflet.Map);
Vue.component('v-tilelayer', Vue2Leaflet.TileLayer);
Vue.component('v-marker', Vue2Leaflet.Marker);
Vue.component('v-popup', Vue2Leaflet.Popup);

new Vue({
    el: '#app',
    data() {
        return {
            zoom: 13,
            center: [47.417220, -1.219482],
            url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
            marker: L.latLng(47.413220, -1.219482),

            markers: []
        }
    },
    mounted () {
      window.setTimeout( () => {
        this.markers.push({
          id: 1,
          latlng: L.latLng(47.417220, -1.222482),
          content: 'Hi! this is my popup data'
        });
      }, 1000);

      window.setTimeout( () => {
        this.markers.push({
          id: 2,
          latlng: L.latLng(47.417220, -1.24),
          content: 'Another'
        });
      }, 2000);

      this.$refs.map.mapObject.on('add', (e) => {
        console.log(e)

      });
    }
});

＆＃13;

html, body, #app {
  height: 200px;
  margin: 0;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<script src="https://unpkg.com/vue2-leaflet@0.0.58/dist/vue2-leaflet.js"></script>

  <div id="app">
    <v-map ref='map' :zoom="zoom" :center="center">
      <v-tilelayer :url="url" :attribution="attribution"></v-tilelayer>
      <v-marker :lat-lng="marker"></v-marker>
        <v-marker v-for="item in markers" :key="item.id" :lat-lng="item.latlng" @l-add="$event.target.openPopup()">
          <v-popup :content="item.content"></v-popup>
        </v-marker>
    </v-map>
  </div>

＆＃13;

如何在弹出窗口初始打开时在Vue2-Leaflet中添加标记

2 个答案: