如题所述:百度的编辑界面很直观,修改后就可以运行,地址:http://developer.baidu.com/map/jsdemo.htm#c2_8;
因为同事研究了一下午结果都没搞出来,他copy百度示例的代码写的很混乱,贴来贴去的,结果把自己陷进去了,看到如此情形实在不忍心啊,(毕竟是demo,百度提供的代码大可以大刀阔斧的修改,不用吝啬)于是就参与了进去。先看API,然后看示例分析,必须要修改生成自己的轨迹线,如果能找到回到函数对轨迹数据进行自定义问题就解决了,果不其然就是这样的。关键还是修改onSearchComplete函数的回调结果中arrPois修改为自己GPS经纬度位置集合就可以了。代码如下:
<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=您的密钥"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.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 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 arrPois = res.getPlan(0).getRoute(0).getPath();
// 【自定义轨迹数组实现轨迹绘制】,可以实现【车联网】GPS轨迹数据回放
var arrPois = [{lat:30.6,lng:104.0},{lat:30.632333,lng:104.5444}];
map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'}));
map.setViewport(arrPois); lushu = new BMapLib.LuShu(map,arrPois,{
defaultContent:"",//"从*到百度大厦"
autoView:true,//是否开启自动视野调整,如果开启那么路书在运动过程中会根据视野自动调整
icon : new BMap.Icon('http://developer.baidu.com/map/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:39.964429,html:'高速公路收费<div><img src="http://map.baidu.com/img/logo-map.gif"/></div>',pauseTime:3},
{lng:116.381476,lat:39.974073,html:'肯德基早餐<div><img src="http://ishouji.baidu.com/resource/images/map/show_pic04.gif"/></div>',pauseTime:2}
]});
}
}
});
// 【驱动方法执行,只要在回调函数onSearchComplete中处理就不会干扰最后的轨迹生成】,此处初始化就行不需要做修改
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);
}
</script>
</body>
</html>
例子中只设置了两个点,效果如图:
注:示例代码中有些地方还可以再删减,有兴趣自己弄吧!