標籤：style blog http color java 使用 os io
最近項目需要結合用到百度地圖,需求是在地圖實現多個點步行連線問題;因為百度有提供兩點之間的步行路徑圖,以及沿線的座標點資訊;初步設想是首先把各個點的步行路徑畫出來,然後得到這條線路的座標資訊集合,然後通過百度地圖的另外一個做直線介面重新把完整線路繪畫出來;
如果你對百度地圖的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://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://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="jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript" src="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="button" /> <div id="allmap"> </div> <%--style="display:none"--%> <div id="r-result"> </div></body></html><script type="text/javascript"> //定義集合用來存放沿線的座標值 var chartData = []; //載入地圖 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 = []; viaRouteData.push(endpoint); $(function () { $("#btn_show").click(function () { //這邊故意讓它晚一秒運行，因為上面擷取座標資訊是比較慢又是非同步 setTimeout(ShowRoute, 1000); }); }); function ShowRoute() { var firstPoint; var endPoint; var newChartData = []; //對座標點重新定義 $.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>
左邊是使用步行介面顯示的三點連線地圖,兩點間都會標識起點跟終點,所以要是有多點地圖上就會出現很為起點、終點的標誌；右邊這張是通過修改以後的地圖；
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
