如今的互联网+,智能电子产品,特别的车载智能系统,大部分会在手机端有一个功能,就是产品的移动轨迹,这种功能怎么实现呢?用百度地图的路书功能能够完美的实现这个功能
javascript
下面是路书功能的主要代码:java
1:在页面引入百度地图以及路书的JSapi
<script src="http://api.map.baidu.com/api?v=2.0&ak=LaG1rsYzCI7DMj0joho6hTtD"></script> <script type="text/javascript" src="../js/Lushu.js"></script>
上面的Lushu.js 必须是从 http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js 下载到你本地,若是你不须要 下面的一个特定的功能,是不须要的。由于须要改源码!spa
2:构建轨迹code
var polyline = new BMap.Polyline(allPoint, { strokeColor : "blue", strokeWeight : 3, strokeOpacity : 0.7 }); map.addOverlay(polyline);
allPoint 则是你全部的轨迹坐标点。ip
3:制做路书
ci
lushu = new BMapLib.LuShu(map, allPoint, { defaultContent : "", autoView : true, //是否开启自动视野调整,若是开启那么路书在运动过程当中会根据视野自动调整 icon : new BMap.Icon('/' + PROJECT_NAME + '/images/car.png',new BMap.Size(52, 26), { anchor : new BMap.Size(27, 13) }), enableRotation : true, //是否设置marker随着道路的走向进行旋转 speed : speed, landmarkPois : [] }); lushu.start();
这样就是一个路书基本功能了,是否是很简单,下面是作一个我我的认为不太须要的改动,就是路书中的车辆在移动时,能 够一直处于窗口的最中间。get
这须要在 Lushu.js 中改一句代码源码
在Lushu.js 的 285行 后面加入一句 i._map.setCenter(q) 的代码就能够了。产品