vue-baidu-map 多点之间画动态的线Polyline
- 安装
npm i vue-baidu-map@0.21.22 --save
main.js
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
ak: '你的ak'
})
- 示例
<template>
<baidu-map
style="width: 100%; height: 100%"
:center="mapCenter"
:zoom="mapZoom"
:dragging="true"
:scroll-wheel-zoom="true"
mapType="BMAP_HYBRID_MAP"
@ready="handler"
>
</baidu-map>
</template>
<script>
export default {
data() {
return {
map: '',
BMap: '',
mapCenter: {
lng: 129.138542,
lat: 44.430244,
},
mapZoom: 15,
pointsList: [
{
lng: 129.138542,
lat: 44.430244,
},
{
lng: 129.122236,
lat: 44.442156,
},
{
lng: 129.122566,
lat: 44.462756,
},
],
lineList: [],
}
},
mounted() {
},
methods: {
handler({ BMap, map, BBezierCurve }) {
this.map = map
this.BMap = BMap
for (let i = 0; i < this.pointsList.length; i++) {
if (i < this.pointsList.length - 1) {
var fromCenter = new BMap.Point(this.pointsList[i].lng, this.pointsList[i].lat)
var toCenter = new BMap.Point(this.pointsList[i + 1].lng, this.pointsList[i + 1].lat)
// 连接线
var line = new BMap.Polyline([fromCenter, toCenter], {
enableEditing: false,
enableClicking: false,
strokeWeight: 10,
strokeColor: '#000',
strokeOpacity: 0.5,
strokeStyle: 'solid',
})
this.map.addOverlay(line)
// 运动的线
var line2 = new BMap.Polyline([], {
enableEditing: false,
enableClicking: false,
strokeWeight: 10,
strokeColor: 'rgb(255, 234, 0)',
strokeOpacity: 1,
strokeStyle: 'solid',
})
this.lineList.push({
line: line2,
fromCenter: fromCenter,
toCenter: toCenter,
})
this.map.addOverlay(line2)
}
}
this.lineList.forEach((element, index) => {
this.animateLine(element.line, element.fromCenter, element.toCenter)
})
},
// 动画函数
animateLine(polyline, startPoint, endPoint, totalSteps = 100, interval = 100, currentStep = 0) {
if (currentStep >= totalSteps) {
polyline.setPath([])
this.animateLine(polyline, startPoint, endPoint)
return
}
var stepX = (endPoint.lng - startPoint.lng) / totalSteps
var stepY = (endPoint.lat - startPoint.lat) / totalSteps
var newPoint = new BMap.Point(
startPoint.lng + stepX * currentStep,
startPoint.lat + stepY * currentStep
)
polyline.getPath().push(newPoint)
polyline.setPath(polyline.getPath())
setTimeout(() => {
this.animateLine(polyline, startPoint, endPoint, totalSteps, interval, currentStep + 1)
}, interval)
},
},
}
</script>
<style scoped></style>