一款百度地图实现路线行驶回放等功能的代码,地图的下面有5个按钮,可以点击控制路线的回放、暂停、停止,同样可以控制车牌号的显示与否。
页面的head部分,需简单设置页面元素的样式,对接百度地图并引入必要的JS插件,代码如下:
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;}
#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="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>-->
<script type="text/javascript" src="js/maplushu.js"></script>
页面的body部分,需设置好地图的div容器和其余的控制按钮,代码如下:
<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>
页面的底部,实例化百度地图,设置好多个路线坐标点,并设置好按钮的点击事件响应,代码如下:
var map = new BMap.Map('map_canvas');
map.enableScrollWheelZoom();
map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
var lushu;
// 实例化一个驾车导航用来生成路线
var drv = new BMap.DrivingRoute('北京', {
onSearchComplete: function(res) {
if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
var plan = res.getPlan(0);
var x=116.307852, y=40.057031; //用变量存值
var arrPois =[
new BMap.Point(116.357571,39.988698),
new BMap.Point(116.338749,40.026922),
new BMap.Point(116.323082,40.047674),
new BMap.Point(x,y)//自己添加的路线,可按照自己的这个路线行走
];
/* 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: '#337AB7'}));
map.setViewport(arrPois);
lushu = new BMapLib.LuShu(map,arrPois,{
defaultContent:"粤A30780",//"从天安门到百度大厦"
autoView:true,//是否开启自动视野调整,如果开启那么路书在运动过程中会根据视野自动调整
icon : new BMap.Icon('http://lbsyun.baidu.com/jsdemo/img/car.png', new BMap.Size(52,26),{anchor : new BMap.Size(27, 13)}),
speed: 4500,
enableRotation:true,//是否设置marker随着道路的走向进行旋转
landmarkPois: [
{lng:116.314782,lat:39.913508,html:'加油站',pauseTime:2},
{lng:116.315391,lat:40.66,html:'高速公路收费<div><img src="http://map.baidu.com/img/logo-map.gif"/></div>',pauseTime:3},
{lng:116.381476,lat:58.88,html:'肯德基早餐<div><img src="http://ishouji.baidu.com/resource/images/map/show_pic04.gif"/></div>',pauseTime:2}
],
});
/*添加点标记begin*/
for(var i = 0; i< arrPois.length; i++){
var marker = new BMap.Marker( arrPois[i]);//基于定位的这个点的点位创建marker
map.addOverlay(marker);//将marker作为覆盖物添加到map地图上
/* marker.setLabel(new BMap.Label("我是商圈:"+(i+1),{offset:new BMap.Size(20,-10)}));//消息框*/
}
/* var marker = new BMap.Marker(arrPois[0]);//基于定位的这个点的点位创建marker
map.addOverlay(marker);//将marker作为覆盖物添加到map地图上
var marker = new BMap.Marker(arrPois[arrPois.length-1]);
map.addOverlay(marker);*/
/*添加点标记end*/
// lushu.start();
}
}
});
drv.search('永顺镇', '百度大厦');
//绑定事件
$("run").onclick = function(){
lushu.start();
};
$("stop").onclick = function(){
lushu.stop();
};
$("pause").onclick = function(){
lushu.pause();
};
$("hide").onclick = function(){
lushu.hideInfoWindow();
};
$("show").onclick = function(){
lushu.showInfoWindow();
};
function $(element){
return document.getElementById(element);
}
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791