百度地图多定位点间移动

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多定位点间移动</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&自己的ID"></script>
</head>
<body>
<div>
<input type='button' value='开始' onclick='run();' style="z-index: 999;" />
<div style="1320px;height:640px;border:1px solid gray" id="container">

</div>

</div>


</body>
</html>
<script type="text/javascript">





var q={"state":"0","devices":[{"pt":"2016-12-21 12:00:29","lat":"22.68545","lng":"114.06649","s":"28.00","c":"284","stop":"0","stm":"0","g":"1"},{"pt":"2016-12-21 12:00:29","lat":"22.68545","lng":"114.06649","s":"28.00","c":"284","stop":"0","stm":"0","g":"1"},{"pt":"2016-12-21 12:00:49","lat":"22.68587","lng":"114.06444","s":"52.00","c":"278","stop":"0","stm":"0","g":"1"},{"pt":"2016-12-21 12:00:49","lat":"22.68587","lng":"114.06444","s":"52.00","c":"278","stop":"0","stm":"0","g":"1"},{"pt":"2016-12-21 12:01:09","lat":"22.68621","lng":"114.06131","s":"59.00","c":"276","stop":"0","stm":"0","g":"1"},{"pt":"2016-12-21 12:01:29","lat":"22.68657","lng":"114.05812","s":"62.00","c":"276","stop":"0","stm":"0","g":"1"},{"pt":"2016-12-21 12:01:49","lat":"22.68691","lng":"114.05495","s":"57.00","c":"275","stop":"0","stm":"0","g":"1"},{"pt":"2016-12-21 12:02:09","lat":"22.68715","lng":"114.05189","s":"55.00","c":"270","stop":"0","stm":"0","g":"1"},{"pt":"2016-12-21 12:02:29","lat":"22.68717","lng":"114.04851","s":"65.00","c":"268","stop":"0","stm":"0","g":"1"},{"pt":"2016-12-21 12:02:29","lat":"22.68717","lng":"114.04851","s":"65.00","c":"268","stop":"0","stm":"0","g":"1"},{"pt":"2016-12-21 12:02:49","lat":"22.68714","lng":"114.04504","s":"62.00","c":"270","stop":"0","stm":"0","g":"1"},{"pt":"2016-12-21 12:02:49","lat":"22.68714","lng":"114.04504","s":"62.00","c":"270","stop":"0","stm":"0","g":"1"}]}
var devices= q.devices;
var len=devices.length;


var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(devices[0].lng,devices[0].lat), 15);

var myP1 = new BMap.Point(devices[0].lng,devices[0].lat); //起点
var myP2 = new BMap.Point(devices[len-1].lng,devices[len-1].lat); //终点
var myIconmove = new BMap.Icon("http://dev.baidu.com/wiki/static/map/API/examples/images/Mario.png", new BMap.Size(32, 70), { //小车图片
//offset: new BMap.Size(0, -5), //相当于CSS精灵
imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
});
//var driving2 = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: false}}); //驾车实例
//driving2.search(myP1, myP2); //显示一条公交线路

//添加起标志
//添加终标志
var point = new BMap.Point(devices[0].lng,devices[0].lat);

//添加起标志
//添加终标志
var myIcon = new BMap.Icon("http://api.map.baidu.com/img/dest_markers.png",new BMap.Size(28, 32), { offset: new BMap.Size(10, 25), imageOffset: new BMap.Size(0, 0) });
var myIcon2 = new BMap.Icon("http://api.map.baidu.com/img/dest_markers.png",new BMap.Size(28, 32), { offset: new BMap.Size(-150, -205), imageOffset: new BMap.Size(0, -34) });

var point2 = new BMap.Point(devices[len-1].lng,devices[len-1].lat);
var marker = new BMap.Marker(point, {icon: myIcon}); // 创建标注
var marker2 = new BMap.Marker(point2, {icon: myIcon2}); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.addOverlay(marker2);
marker.setAnimation(BMAP_ANIMATION_DROP ); //跳动的动画
marker2.setAnimation(BMAP_ANIMATION_DROP ); //跳动的动画

var points = []; // 添加海量点数据
for(var i=0;i<len;i++){
var p = new BMap.Point(devices[i].lng, devices[i].lat);
points.push(p);
}

var polyline = new BMap.Polyline(points, {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});
map.addOverlay(polyline);

function run(){
var driving = new BMap.DrivingRoute(map); //驾车实例
driving.search(point, point2);
driving.setSearchCompleteCallback(function(){
debugger;
var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例,获得一系列点的数组
pts =points;

var paths = pts.length; //获得有几个点

//alert(pts.toString());
var carMk = new BMap.Marker(pts[0]);
map.addOverlay(carMk);
i=0;
function resetMkPoint(i){
carMk.setPosition(pts[i]);
if(i < paths){
setTimeout(function(){
i++;
resetMkPoint(i);
},500);
}else{map.removeOverlay(carMk);}
}
setTimeout(function(){
resetMkPoint(0);
},800)

});
}
</script>


也是从网上找的代码改的,具体改谁的不记得了。。
原文地址:https://www.cnblogs.com/doudouli/p/6635912.html