vue+leaflet实现轨迹回放(完整代码实现),要求小白能看懂
时间: 2024-05-20 15:18:21 浏览: 16
可以,以下是代码实现:
<template>
<div class="map-container">
<div ref="map" class="map"></div>
</div>
</template>
<script>
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'
export default {
name: 'Map',
data() {
return {
map: null,
polyline: null,
marker: null,
coords: [
[39.984702, 116.318417],
[39.984285, 116.313977],
[39.977834, 116.313977],
[39.977418, 116.318417],
[39.979643, 116.321556],
[39.984702, 116.318417]
]
}
},
mounted() {
this.initMap()
},
methods: {
initMap() {
this.map = L.map(this.$refs.map).setView([39.984702, 116.318417], 15)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18
}).addTo(this.map)
this.polyline = L.polyline(this.coords, {color: 'red'}).addTo(this.map)
this.marker = L.marker(this.coords[0]).addTo(this.map)
this.play()
},
play() {
let i = 0
const animateMarker = () => {
if (i === this.coords.length) {
return
}
this.marker.setLatLng(this.coords[i])
this.map.setView(this.coords[i], 15)
i++
setTimeout(animateMarker, 1000)
}
animateMarker()
}
}
}
</script>
<style scoped>
.map-container {
width: 100%;
height: 100%;
}
.map {
width: 100%;
height: 100%;
}
</style>
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)