Primero introduzca la API de mapas de Baidu en public/index.html
<script src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>plantilla
<div id="app">
<div id="map_canvas"></div>
<button @click="nextOne">下一步</button>
</div>js
<script>
export default {
name: 'App',
data() {
return {
marker: '',
pointArr: [
{
123: { lng: "116.379341", lat: "39.938776" },
124: { lng: "116.402625", lat: "39.943091" },
125: { lng: "116.373807", lat: "39.953103" },
126: { lng: "116.40011", lat: "39.958357" },
127: { lng: "116.408518", lat: "39.958025" },
128: { lng: "116.364537", lat: "39.943755" }
},
{
123: { lng: "116.379628", lat: "39.935125" },
124: { lng: "116.403487", lat: "39.94027" },
125: { lng: "116.38509", lat: "39.955315" },
126: { lng: "116.392924", lat: "39.958357" },
127: { lng: "116.392924", lat: "39.957804" },
128: { lng: "116.368993", lat: "39.944032" }
},
{
123: { lng: "116.379341", lat: "39.938776" },
124: { lng: "116.402625", lat: "39.943091" },
125: { lng: "116.373807", lat: "39.953103" },
126: { lng: "116.40011", lat: "39.958357" },
127: { lng: "116.408518", lat: "39.958025" },
128: { lng: "116.364537", lat: "39.943755" }
}
],
map: '',
nowPoint: {},
nowMarker: {},
pointIndex: 0
}
},
methods: {
init() {
this.map = new BMap.Map("map_canvas");
var point = new BMap.Point(116.379341, 39.938776);
this.map.centerAndZoom(point, 15);
// 初始化
for (var n in this.pointArr[0]) {
var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/car.png", new BMap.Size(52, 26));
this.nowPoint[n] = new BMap.Point(this.pointArr[0][n].lng, this.pointArr[0][n].lat);
this.nowMarker[n] = new BMap.Marker(this.nowPoint[n], { icon: myIcon });
this.map.addOverlay(this.nowMarker[n]);
var sContent = `<h4 style='margin:0 0 5px 0;'>车牌号：粤B W8G83</h4>
<button class="callCar">联系司机</button>
<p style='margin:0;line-height:1.5;font-size:13px;'>
司机姓名：某某某
</p>
<p style='margin:0;line-height:1.5;font-size:13px;'>
手机号：13898745641
</p></div>`;
var infoWindow = new BMap.InfoWindow(sContent);
// marker添加点击事件
this.nowMarker[n].addEventListener('click', function () {
this.openInfoWindow(infoWindow);
// 图片加载完毕重绘infoWindow
document.getElementById('imgDemo').onload = function () {
infoWindow.redraw(); // 防止在网速较慢时生成的信息框高度比图片总高度小，导致图片部分被隐藏
};
});
}
},
nextOne() {
this.pointIndex = this.pointIndex + 1;
for (var n in this.pointArr[this.pointIndex]) {
var point = new BMap.Point(this.pointArr[this.pointIndex][n].lng, this.pointArr[this.pointIndex][n].lat);
if (!this.pointArr[this.pointIndex][n]) { return; }
// nowPoint[n].setPosition(new BMap.Point(pointArr[1][n].lng,pointArr[1][n].lat));
this._move(this.nowPoint[n], point, this.nowMarker[n]);
this.nowPoint[n] = point;
}
},
_move(initPos, targetPos, nowMarker) {
var me = this,
//当前的帧数
currentCount = 0,
//步长，米/秒
timer = 10,
step = 400 / (1000 / timer),
//初始坐标
init_pos = this.map.getMapType().getProjection().lngLatToPoint(initPos),
//获取结束点的(x,y)坐标
target_pos = this.map.getMapType().getProjection().lngLatToPoint(targetPos),
//总的步长
count = Math.round(this._getDistance(init_pos, target_pos) / step);
console.log(count);
//如果小于1直接移动到下一点
// if (count < 1) {
// me._moveNext(++me.i);
// return;
// }
//两点之间匀速移动
me._intervalFlag = setInterval(() => {
//两点之间当前帧数大于总帧数的时候，则说明已经完成移动
if (currentCount >= count) {
clearInterval(me._intervalFlag);
return;
//移动的点已经超过总的长度
// if(me.i > me._path.length){
// return;
// }
//运行下一个点
// me._moveNext(++me.i);
} else {
currentCount++;
var x = this.tweenLinear(init_pos.x, target_pos.x, currentCount, count),
y = this.tweenLinear(init_pos.y, target_pos.y, currentCount, count),
pos = this.map.getMapType().getProjection().pointToLngLat(new BMap.Pixel(x, y));
//设置marker
if (currentCount == 1) {
var proPos = null;
// if(me.i - 1 >= 0){
// proPos = me._path[me.i - 1];
// }
this.setRotation(proPos, initPos, targetPos, nowMarker);
}
//正在移动
nowMarker.setPosition(pos);
//设置自定义overlay的位置
// me._setInfoWin(pos);
}
}, timer);
},
_getDistance(pxA, pxB) {
return Math.sqrt(Math.pow(pxA.x - pxB.x, 2) + Math.pow(pxA.y - pxB.y, 2));
},
setRotation(prePos, curPos, targetPos, nowMarker) {
var me = this;
var deg = 0;
//start!
curPos = this.map.pointToPixel(curPos);
targetPos = this.map.pointToPixel(targetPos);
if (targetPos.x != curPos.x) {
var tan = (targetPos.y - curPos.y) / (targetPos.x - curPos.x),
atan = Math.atan(tan);
deg = atan * 360 / (2 * Math.PI);
//degree correction;
if (targetPos.x < curPos.x) {
deg = -deg + 90 + 90;
} else {
deg = -deg;
}
nowMarker.setRotation(-deg);
} else {
var disy = targetPos.y - curPos.y;
var bias = 0;
if (disy > 0)
bias = -1
else
bias = 1
nowMarker.setRotation(-bias * 90);
}
return;
},
tweenLinear(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount,
d = count;
return c * t / d + b;
}
},
mounted() {
this.init();
}
}
</script>CSS
<style>
#map_canvas {
width: 100vw;
height: 100vh;
margin: 0;
font-family: "微软雅黑";
}
</style>