首页 > 代码库 > 百度地图利用DrivingRoute做轨迹回放
百度地图利用DrivingRoute做轨迹回放
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你自己的AK"></script> <title>百度地图利用DrivingRoute做轨迹回放</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); // 创建Map实例 map.centerAndZoom("哈尔滨",15); // 初始化地图,用城市名设置地图中心点 map.setMapStyle({ //可以自己定义地图底图 http://developer.baidu.com/map/custom/ styleJson:[ { "featureType": "water", "elementType": "all", "stylers": { "color": "#72b8fe" } }, { "featureType": "road", "elementType": "geometry.fill", "stylers": { "color": "#ffffff" } }, { "featureType": "road", "elementType": "geometry.stroke", "stylers": { "color": "#bababa" } }, { "featureType": "road", "elementType": "labels.text.fill", "stylers": { "color": "#767676" } }, { "featureType": "road", "elementType": "labels.text.stroke", "stylers": { "color": "#ffffff" } }, { "featureType": "land", "elementType": "all", "stylers": { "color": "#b8cb93" } } ] }); map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT})); map.enableScrollWheelZoom(true); var pts = [ new BMap.Point(126.618398,45.721217), new BMap.Point(126.62081,45.713008), new BMap.Point(126.654694,45.732086), new BMap.Point(126.675481,45.738471) ]; var polyline ; var options = { onSearchComplete: function(results){ if (driving.getStatus() == BMAP_STATUS_SUCCESS){ // 获取第一条方案 var plan = results.getPlan(0); // 获取方案的驾车线路 var route = plan.getRoute(0); //返回路线的地理坐标点数组。(自 1.2 新增) var points = route.getPath(); polyline = new BMap.Polyline(points); //alert(points.length); map.addOverlay(polyline); //增加折线 } } //, //renderOptions:{map: map, autoViewport: true} }; var driving = new BMap.DrivingRoute(map, options); i=0; function playLine(i){ if(i==0){//第一个点 直接添加 var marker = new BMap.Marker(pts[i]); // 创建标注 map.addOverlay(marker); marker.setLabel(new BMap.Label("我是第"+(i+1)+"个点",{offset:new BMap.Size(20,-10)})); map.panTo(pts[i]); i++; setTimeout(function(){ playLine(i); },2000) }else{//获取PolyLine并添加 添加点 if(i<=pts.length){ driving.search(pts[i-1], pts[i]); map.addOverlay(polyline); var marker = new BMap.Marker(pts[i]); // 创建标注 map.addOverlay(marker); marker.setLabel(new BMap.Label("我是第"+(i+1)+"个点",{offset:new BMap.Size(20,-10)})); map.panTo(pts[i]); i++; setTimeout(function(){ playLine(i); },2000) } } } playLine(i); </script>
需求:手机上报的GPS坐标,需要在网页上做动态路径回放 问题:直接用上报的GPS坐标构造PolyLine,与实际路径差别太大。 解决办法:利用DrivingRoute获取到两个坐标点直接的优化路径。 补充说明:此DEMO没有做大数据量的测试。仅提供思路以供参考。
本文出自 “Send2Ocean” 博客,请务必保留此出处http://3409736.blog.51cto.com/3399736/1584357
百度地图利用DrivingRoute做轨迹回放
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。