码迷,mamicode.com
首页 > 移动开发 > 详细

百度地图多定位点间移动

时间:2017-03-28 17:37:18      阅读:337      评论:0      收藏:0      [点我收藏+]

标签:call   起点   animation   char   4.0   ring   index   push   stat   

<!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="width: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);
p.data = "http://blog.csdn.net/wang_song_yan";
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>

百度地图多定位点间移动

标签:call   起点   animation   char   4.0   ring   index   push   stat   

原文地址:http://www.cnblogs.com/doudouli/p/6635912.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!