如何使用vue2leaflet访问多个映射并向多个映射添加折线

Question

我试图通过使用v创建一个包含多个多行映射的页面。我试着使用传单:load事件在地图加载之后调用一个方法，但是事件似乎不存在。

这是我的主意，虽然我知道它不管用。

有人对我如何做到这一点有什么建议吗？

<template>
    <div>
        <div v-for="map in maps" :key="map.id">
            <l-map style="height:500px; width:500px" 
                   @leaflet:load="insertPolyline">
                <l-tile-layer :url="url" :attribution="attribution"/>
            </l-map>
        </div>
    </div>
</template>

<script >
import { LMap, LPolyline, LTileLayer} from 'vue2-leaflet';

export default {
components: {
    LMap,
    LPolyline,
    LTileLayer
  },
data() {
    return {
        mapsLoaded: false,
        maps: [],
        url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
        attribution:'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> 
                     contributors',
    }
},

mounted() {
    this.maps.push('test1')
    this.maps.push('test2')
    this.maps.push('test3')
},

methods: {
    insertPolyline: function(event) {
        this.$nextTick(() => {
            var map = event.target.mapObject
            var polyline = require( 'google-polyline' )
            var points = polyline.decode( '_p~iF~ps|U_ulLnnqC_mqNvxq`@' )
            L.polyline(points, {
            color: 'blue',
            weight: 5,
            opacity: .7,
            lineJoin: 'round'
            }).addTo(map);
            map.fitBounds(points);
        })
    }
}
}
</script>
<style>
 @import "~leaflet/dist/leaflet.css";
</style>

Answer 1

好吧我想明白了。在v-for内部时，您可以使用相同的ref，它将使用该ref创建一个数组。然后，通过使用索引，可以逐步遍历数组并添加多行

这是密码

<template>
    <div>
        <div v-for="n in numberOfMaps" :key="n.id">
            <l-map ref="map" style="height:500px; width:500px" 
                   @leaflet:load="insertPolyline">
                <l-tile-layer :url="url" :attribution="attribution"/>
            </l-map>
        </div>
    </div>
</template>

<script >
import { LMap, LPolyline, LTileLayer} from 'vue2-leaflet';

export default {
components: {
    LMap,
    LPolyline,
    LTileLayer
  },
data() {
    return {
        mapsLoaded: false,
        url:'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
        attribution:'&copy; <a 
        href="http://osm.org/copyright">OpenStreetMap</a> contributors',
        numberOfMaps: 0,
        mapIndex: 0
    }
},

mounted() {
    this.numberOfMaps = 5
},

methods: {
    insertPolyline: function() {
        var map = this.$refs.map[this.mapIndex++].mapObject
        var polyline = require( 'google-polyline' )
        var points = polyline.decode( '_p~iF~ps|U_ulLnnqC_mqNvxq`@' )
        L.polyline(points, {
        color: 'blue',
        weight: 5,
        opacity: .7,
        lineJoin: 'round'
        }).addTo(map);
        map.fitBounds(points);
    }
}
}
</script>
<style>
 @import "~leaflet/dist/leaflet.css";
</style>