用vue和leaflet实现一个行驶轨迹的功能,并写一个完整代码实例
时间: 2024-06-03 11:08:34 浏览: 106
好的,以下是一个简单的示例代码,使用Vue和Leaflet实现行驶轨迹功能:
<template>
<div id="map"></div>
</template>
<script>
import L from 'leaflet'
export default {
mounted() {
// 创建地图容器
const map = L.map('map').setView([39.9, 116.4], 12)
// 添加图层
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
maxZoom: 18,
}).addTo(map)
// 创建轨迹线
const polyline = L.polyline([], { color: 'red' }).addTo(map)
// 模拟行驶轨迹
const points = [
[39.9, 116.4],
[39.91, 116.45],
[39.92, 116.5],
[39.93, 116.55],
[39.94, 116.6],
]
let i = 0
setInterval(() => {
if (i < points.length) {
polyline.addLatLng(points[i])
map.setView(points[i], 12)
i++
} else {
clearInterval()
}
}, 1000)
},
}
</script>
<style>
#map {
height: 500px;
}
</style>
阅读全文