<html lang="en">
<head>
<meta charset="utf-8" />
<title>轨迹回放(路书)</title>
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#map_canvas{width:100%;height:500px;}
#result {width:100%}
</style>
<script src="http://api.map.baidu.com/api?v=2.0&ak=RKVMcKG7V23ABjbKnvOGyjY5GGaj0eLL"></script>
<script type="text/javascript" src="lushu.js"></script>
</head>
<body>
<div id="map_canvas"></div>
<div id="result"></div>
<button id="run">开始</button>
<button id="stop">停止</button>
<button id="pause">暂停</button>
<button id="hide">隐藏信息窗口</button>
<button id="show">展示信息窗口</button>
<script>
var marker;
var map = new BMap.Map('map_canvas');
map.enableScrollWheelZoom();
map.centerAndZoom();
map.addEventListener('click', function(e){
var info =new BMap.InfoWindow('', {width: 260});
var projection =this.getMapType().getProjection();
var lngLat = e.point;
var lngLatStr ="经纬度："+ lngLat.lng +", "+ lngLat.lat;
var worldCoordinate = projection.lngLatToPoint(lngLat);
var worldCoordStr ="<br />平面坐标："+ worldCoordinate.x +", "+ worldCoordinate.y;
var pixelCoordinate =new BMap.Pixel(Math.floor(worldCoordinate.x * Math.pow(2, this.getZoom() -18)),
Math.floor(worldCoordinate.y * Math.pow(2, this.getZoom() -18)));
var pixelCoordStr ="<br />像素坐标："+ pixelCoordinate.x +", "+ pixelCoordinate.y;
var tileCoordinate =new BMap.Pixel(Math.floor(pixelCoordinate.x /256),
Math.floor(pixelCoordinate.y /256));
var tileCoordStr ="<br />图块坐标："+ tileCoordinate.x +", "+ tileCoordinate.y;
var viewportCoordinate = map.pointToPixel(lngLat);
var viewportCoordStr ="<br />可视区域坐标："+ viewportCoordinate.x +", "+ viewportCoordinate.y;
var overlayCoordinate = map.pointToOverlayPixel(lngLat);
var overlayCoordStr ="<br />覆盖物坐标："+ overlayCoordinate.x +", "+ overlayCoordinate.y;
info.setContent(lngLatStr + worldCoordStr + pixelCoordStr + tileCoordStr +
viewportCoordStr + overlayCoordStr);
map.openInfoWindow(info, lngLat);
});
var lushu;
// 实例化一个驾车导航用来生成路线
var drv = new BMap.DrivingRoute('北京', {
onSearchComplete: function(res) {
if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
var plan = res.getPlan(0);
var arrPois =[];
for(var j=0;j<plan.getNumRoutes();j++){
var route = plan.getRoute(j);
arrPois= arrPois.concat(route.getPath());
}
// map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'})); //不画线
map.setViewport(arrPois);
marker=new BMap.Marker(arrPois[0],{
icon : new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)})
});
var label = new BMap.Label("粤A30780",{offset:new BMap.Size(0,-30)});
label.setStyle({border:"1px solid rgb(204, 204, 204)",color: "rgb(0, 0, 0)",borderRadius:"10px",padding:"5px",background:"rgb(255, 255, 255)",});
marker.setLabel(label);
map.addOverlay(marker);
BMapLib.LuShu.prototype._move=function(initPos,targetPos,effect) {
var pointsArr=[initPos,targetPos]; //点数组
var me = this,
//当前的帧数
currentCount = 0,
//步长，米/秒
timer = 1,
step = this._opts.speed / (6000 / timer),
//初始坐标
init_pos = this._projection.lngLatToPoint(initPos),
//获取结束点的(x,y)坐标
target_pos = this._projection.lngLatToPoint(targetPos),
//总的步长
count = Math.round(me._getDistance(init_pos, target_pos) / step);
//显示折线 syj201607191107
this._map.addOverlay(new BMap.Polyline(pointsArr, {
strokeColor : "blue",
strokeWeight : 5,
strokeOpacity : 0.5
})); // 画线
//如果小于1直接移动到下一点
if (count < 1) {
me._moveNext(++me.i);
return;
}
me._intervalFlag = setInterval(function() {
//两点之间当前帧数大于总帧数的时候，则说明已经完成移动
if (currentCount >= count) {
clearInterval(me._intervalFlag);
if(me.i < me._path.length){
var data_info =[];
var cc=me.i;
if(me.i%33==0){
for ( var i in arrPois[cc] ){
var str =arrPois[cc][ i ];
data_info.push( str );
}
}
// data_info.push(arrPois[cc]);
// console.log(data_info)
var opts = {
width : 250, // 信息窗口宽度
height: 80, // 信息窗口高度
title : "信息窗口" , // 信息窗口标题
enableMessage:true//设置允许信息窗发送短息
};
for(var i=0;i<data_info.length;i++){
var marker = new BMap.Marker(new BMap.Point(data_info[0],data_info[1])); // 创建标注
var content = data_info[0]+","+data_info[1];
map.addOverlay(marker); // 将标注添加到地图中
addClickHandler(content,marker);
}
function addClickHandler(content,marker){
marker.addEventListener("click",function(e){
openInfo(content,e)
});
}
function openInfo(content,e){
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point); //开启信息窗口
}
/* var cc=me.i+20;
var marker = new BMap.Marker( arrPois[cc]);
map.addOverlay(marker);
marker.setLabel(new BMap.Label("我是哈哈",{offset:new BMap.Size(20,-10)}));//消息框*/
}
//移动的点已经超过总的长度
if(me.i > me._path.length){
return;
}
//运行下一个点
me._moveNext(++me.i);
}else {
currentCount++;
var x = effect(init_pos.x, target_pos.x, currentCount, count),
y = effect(init_pos.y, target_pos.y, currentCount, count),
pos = me._projection.pointToLngLat(new BMap.Pixel(x, y));
//设置marker
if(currentCount == 1){
var proPos = null;
if(me.i - 1 >= 0){
proPos = me._path[me.i - 1];
}
if(me._opts.enableRotation == true){
me.setRotation(proPos,initPos,targetPos);
}
if(me._opts.autoView){
if(!me._map.getBounds().containsPoint(pos)){
me._map.setCenter(pos);
}
}
}
//正在移动
me._marker.setPosition(pos);
//设置自定义overlay的位置
me._setInfoWin(pos);
}
},timer);
};
javascript 3种百度地图车辆平滑移动，多车同时平滑移动，轨迹回放
需积分: 13 57 浏览量
2022-07-22
10:30:11
上传
评论 1
收藏 17KB RAR 举报
新建文件夹1.rar （10个子文件） 
新建文件夹1 baiduMapGo 
updatePoint.html 6KB
lushu.js 22KB index.html 9KB map.html 4KB maptest2.html 2KB __MACOSX baiduMapGo ._lushu.js 210B ._updatePoint.html 266B ._index.html 176B ._map.html 266B ._maptest2.html 266B
评论0