首页 > 代码库 > 百度地图之多点步行路径连线问题
百度地图之多点步行路径连线问题
最近项目需要结合用到百度地图,需求是在地图实现多个点步行连线问题;因为百度有提供两点之间的步行路径图,以及沿线的坐标点信息;初步设想是首先把各个点的步行路径画出来,然后得到这条线路的坐标信息集合,然后通过百度地图的另外一个做直线接口重新把完整线路绘画出来;
如果你对百度地图的API知识不是很了解,可以查看http://developer.51cto.com/art/201110/298662.htm,里面有比较详细的介绍;
百度地图API开发者地址:http://developer.baidu.com/map/jshome.htm
一:通过结合下面两个百度实例来实现我们所要求的功能;
1:两点间步行实例:http://developer.baidu.com/map/jsdemo.htm#i6_1
<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;}</style><script type="text/javascript" src=http://www.mamicode.com/"http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script><title>步行导航检索</title></head><body><div id="allmap"></div></body></html><script type="text/javascript">var map = new BMap.Map("allmap");map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);var walking = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});walking.search("天坛公园", "故宫");</script>
2:折线实例:http://developer.baidu.com/map/jsdemo.htm#c1_5
<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;}</style><script type="text/javascript" src=http://www.mamicode.com/"http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script><title>折线</title></head><body><div id="allmap"></div></body></html><script type="text/javascript">var map = new BMap.Map("allmap");var point = new BMap.Point(116.404, 39.915);map.centerAndZoom(point, 15);var polyline = new BMap.Polyline([ new BMap.Point(116.399, 39.910), new BMap.Point(116.405, 39.920), new BMap.Point(116.425, 39.900)], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});map.addOverlay(polyline);</script>
二:多点步行路径连线实例（完整的代码如下，都有相应说明,实例定义三个点）
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <style type="text/css"> body, html { width: 100%; height: 100%; overflow: hidden; margin: 0; } #allmap { height: 50%; width: 40%; float: left; border-right: 2px solid #bcbcbc; } #r-result { height: 100%; width: 55%; float: left; } </style> <script src=http://www.mamicode.com/"jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript" src=http://www.mamicode.com/"http://api.map.baidu.com/api?v=2.0&ak=nLpN5iKztxIWsPqgwsyrruUG"></script> <script type="text/javascript"> </script></head><body> <input id="btn_show" type="button" value=http://www.mamicode.com/"button" /> <div id="allmap"> </div> <%--style="display:none"--%> <div id="r-result"> </div></body></html><script type="text/javascript"> //定义集合用来存放沿线的坐标值 var chartData =http://www.mamicode.com/ []; //加载地图 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(118.10000, 24.46667), 11); var walking = new BMap.WalkingRoute(map, { renderOptions: { map: map, autoViewport: true} }); var startpoint = new BMap.Point(118.112917, 24.435153); var endpoint = new BMap.Point(118.1086487, 24.439108); walking.search(startpoint, endpoint); //通过setSearchCompleteCallback回调事件可以把步行间的坐标信息获取 walking.setSearchCompleteCallback(function (rs) { var pts = walking.getResults().getPlan(0).getRoute(0).getPath(); for (var i = 0; i < pts.length; i++) { chartData.push(new BMap.Point(pts[i].lat, pts[i].lng)); } }); //另外两点的步行路线 var walkings = new BMap.WalkingRoute(map, { renderOptions: { map: map, autoViewport: true} }); var twoPoint = new BMap.Point(118.1286555, 24.4491888); walkings.search(endpoint, twoPoint); walkings.setSearchCompleteCallback(function (rs) { var pts = walkings.getResults().getPlan(0).getRoute(0).getPath(); for (var i = 0; i < pts.length; i++) { chartData.push(new BMap.Point(pts[i].lat, pts[i].lng)); } }); //用来存放途经点的坐标 var viaRouteData =http://www.mamicode.com/ []; viaRouteData.push(endpoint); $(function () { $("#btn_show").click(function () { //这边故意让它晚一秒运行，因为上面获取坐标信息是比较慢又是异步 setTimeout(ShowRoute, 1000); }); }); function ShowRoute() { var firstPoint; var endPoint; var newChartData =http://www.mamicode.com/ []; //对坐标点重新定义 $.each(chartData, function (item, value) { newChartData.push(new BMap.Point(value.lat, value.lng)); }); //为了获得起点及终点的坐标值,方便对它进行文字处理 firstPoint = newChartData[0]; endPoint = newChartData[newChartData.length - 1]; //加载地图 var maps = new BMap.Map("r-result"); maps.centerAndZoom(new BMap.Point(118.10000, 24.46667), 15); //把步行线路的坐标集合转化成折线 var polyline = new BMap.Polyline(newChartData, { strokeColor: "red", strokeWeight: 6, strokeOpacity: 0.5 }); maps.addOverlay(polyline); //对起点、终点、途经点做一个简单的处理，泡泡跟文字提示 var m1 = new BMap.Marker(firstPoint); var m2 = new BMap.Marker(endPoint); maps.addOverlay(m1); maps.addOverlay(m2); var lab1 = new BMap.Label("起点", { position: firstPoint }); var lab2 = new BMap.Label("终点", { position: endPoint }); maps.addOverlay(lab1); maps.addOverlay(lab2); $.each(viaRouteData, function (item, value) { var m = new BMap.Marker(value); maps.addOverlay(m); var lab = new BMap.Label("途经点", { position: value }); maps.addOverlay(lab); }); }</script>
左边是使用步行接口显示的三点连线地图,两点间都会标识起点跟终点,所以要是有多点地图上就会出现很为起点、终点的标志；右边这张是通过修改以后的地图；
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。