Question

我正在尝试使用v-for创建包含多条折线的多个地图的页面。我试图使用leaflet：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中时，您可以使用相同的引用，它将使用该引用创建一个数组。然后通过使用索引，可以遍历数组并添加折线

这是代码

<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>

如何使用vue2leaflet访问折线并将其添加到多个地图

1 个答案: