最近有个需求，要做百度地图 覆盖物平滑移动，记录下
// 初始值
var pointX = 116.3806;
var pointY = 39.943523;
var nowPoint
var nowMarker
var map = new BMap.Map("map_canvas");
var point = new BMap.Point(pointX, pointY);
map.centerAndZoom(point, 18);
// 初始化
var imgUrl = "./img/car.png"
// map.addControl(new BMap.ZoomControl());
map.enableScrollWheelZoom();
var scaleCtrl = new BMap.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var mapStyle = {
features: ["road", "building", "water", "land", "point"],//隐藏地图上的"point" 兴趣点,
style: 'googlelite' // normal:系统默认,light:清新蓝风格 dark:黑夜风格 redalert:红色警戒风格
// googlelite: 精简风格,grassgreen:自然绿风格,midnight:午夜蓝风格,pink:浪漫粉风格,darkgreen:青春绿风格
// bluish:清新蓝绿风格 grayscale:高端灰风格 hardedge:强边界风格
};
map.setMapStyle(mapStyle);
let isScroll = false
// 下一个
function nextOne(point) {
_move(nowPoint, point, nowMarker);
nowPoint = point;
};
function _move(initPos, targetPos, nowMarker) {
var me = this,
//当前的帧数
currentCount = 0,
//步长，米/秒
timer = 10,
step = 400 / (1000 / timer),
//初始坐标
init_pos = map.getMapType().getProjection().lngLatToPoint(initPos),
//获取结束点的(x,y)坐标
target_pos = map.getMapType().getProjection().lngLatToPoint(targetPos),
//总的步长
count = Math.round(_getDistance(init_pos, target_pos) / step);
me._intervalFlag = setInterval(function () {
//两点之间当前帧数大于总帧数的时候，则说明已经完成移动
if (currentCount >= count) {
clearInterval(me._intervalFlag);
return;
} else {
currentCount++;
var x = tweenLinear(init_pos.x, target_pos.x, currentCount, count),
y = tweenLinear(init_pos.y, target_pos.y, currentCount, count),
pos = map.getMapType().getProjection().pointToLngLat(new BMap.Pixel(x, y));
//设置marker
if (currentCount == 1) {
var proPos = null;
setRotation(proPos, initPos, targetPos, nowMarker);
}
//正在移动
nowMarker.setPosition(pos);
}
}, timer);
}
/**
* 计算两点间的距离
* @param {Point} poi 经纬度坐标A点.
* @param {Point} poi 经纬度坐标B点.
* @return 无返回值.
*/
function _getDistance(pxA, pxB) {
return Math.sqrt(Math.pow(pxA.x - pxB.x, 2) + Math.pow(pxA.y - pxB.y, 2));
};
/**
* 在每个点的真实步骤中设置小车转动的角度
*/
function setRotation(prePos, curPos, targetPos, nowMarker) {
var me = this;
var deg = 0;
//start!
curPos = map.pointToPixel(curPos);
targetPos = 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;
}
// 缓动效果 : 初始坐标，目标坐标，当前的步长，总的步长
function tweenLinear(initPos, targetPos, currentCount, count) {
var b = initPos, c = targetPos - initPos, t = currentCount,
d = count;
return c * t / d + b;
}
function baiduMap(x, y, name) {
let _point = new BMap.Point(x, y);
//坐标转换完之后的回调函数
translateCallback = function (data) {
console.log("data", data)
if (data.status === 0) {
let new_point = data.points[0]
var myIcon = new BMap.Icon(imgUrl, new BMap.Size(52, 26));
// 创建Marker标注，使用小车图标
// 测试
// new_point.lng += Math.random() * 0.001
// new_point.lat += Math.random() * 0.001
let _nextPoint = new BMap.Point(new_point.lng, new_point.lat);
if (!nowPoint) {
nowMarker = new BMap.Marker(new_point, {
title: name,
icon: myIcon,
mydata: "marker"
});
// nowMarker.setRotation(90);
// 将标注添加到地图
map.addOverlay(nowMarker);
let label = new BMap.Label(name, { offset: new BMap.Size(0, 22) });
label.setStyle({
backgroundColor: 'rgba(0, 0,0, 0.5)',
border: 'none',
padding: '5px 6px',
whiteSpace: 'nowrap',
fontSize: '12px',
zIndex: 0,
userSelect: 'none',
color: 'rgba(255, 255, 255)',
borderRadius: '3px',
boxShadow: 'rgb(0 0 0 / 20 %) 0px 2px 6px 0px'
})
nowMarker.setLabel(label); //添加百度label
nowPoint = _nextPoint
} else {
nextOne(_nextPoint)
}
if (!isScroll) {
map.setCenter(new_point);
}
}
}
var convertor = new BMap.Convertor();
var pointArr = [];
pointArr.push(_point);
convertor.translate(pointArr, 1, 5, translateCallback)
setTimeout(function () {
ajaxFn()
}, 5000);
}
function ajaxFn() {
// 模拟请求
setTimeout(() => {
let pointsData = [{
lng: "116.3806", lat: "39.943523"
}, {
lng: "116.382542", lat: "39.942474"
}, {
lng: "116.381882", lat: "39.9427"
}, {
lng: "116.383486", lat: "39.942223"
}, {
lng: "116.385165", lat: "39.941836"
}]
let index = Math.floor(Math.random() * pointsData.length)
var x = pointsData[index].lng
var y = pointsData[index].lat
var name = "car"
baiduMap(x, y, name)
}, 1000)
}
function backSchoolbus() {
if (nowPoint) {
isScroll = false
map.setCenter(nowPoint);
}
}
$(document).ready(function () {
ajaxFn()
});
map.addEventListener('mousedown', function () {
isScroll = true
})
map.addEventListener('mouseup', function () {
setTimeout(() => {
isScroll = false
}, 5000)
})
网友评论