【百度地图API】如何制作多途经点的线路导航——驾车篇
轉：http://www.cnblogs.com/milkmap/archive/2011/08/26/2154627.html
摘要：
休假結束，酸奶小妹要從重慶駕車去北京。可是途中要去西安奶奶家拿牛奶餅干呢！用百度地圖API，能不能幫我實現這個愿望呢？
------------------------------------------------------------------------------------------------------------------------
一、創建地圖
首先要告訴大家的是，API1.2版本取消密鑰，取消服務設置，大家可以采用更加簡短的方式引用API的JS啦~
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
大家跟我一起來創建一張簡單的地圖：
var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
然后為地圖加上一些合適的控件：
map.addControl(new BMap.NavigationControl()); // 添加平移縮放控件 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 map.addControl(new BMap.OverviewMapControl()); //添加縮略地圖控件
我手工找到的重慶、西安、北京三個城市的坐標點，使用坐標拾取工具（請點擊）可以輕松找到這三個經緯度。
當然，你也可以使用localsearch類的search方法。這個可以隨意。
找到坐標點之后，創建三個點對象。
var myP1 = new BMap.Point(106.521436,29.532288); //起點-重慶 var myP2 = new BMap.Point(108.983569,34.285675); //終點-西安 var myP3 = new BMap.Point(116.404449,39.920423); //終點-北京
二、創建一個駕車導航和兩個駕車搜索
好啦，現在來創建一個駕車導航吧~
這句話是不是很簡單？用這句話就可以創建駕車導航啦。
var driving = new BMap.DrivingRoute(map); //創建駕車實例
然后寫兩個搜索方法：
第一個是搜索從重慶到西安的，第二個是從西安到北京的。
driving.search(myP1, myP2); //第一個駕車搜索 driving.search(myP2, myP3); //第二個駕車搜索
三、自己繪制折線
接下來，我們在回調函數setSearchCompleteCallback中，把搜索完畢的路線繪制出來。
注意哦，這里是兩個搜索的路線都繪制出來了哦~~
就這么簡單的三句話，很簡單吧。
第一句、獲取數組
第二句、創建折線
第三句、添加折線覆蓋物
driving.setSearchCompleteCallback(function(){ var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通過駕車實例，獲得一系列點的數組 var polyline = new BMap.Polyline(pts); map.addOverlay(polyline);
}
這個時候，整個駕車導航就是這個樣子滴，簡直充滿了喜感，像一條蚯蚓呢 O(∩_∩)O~
四、添加起點、終點、途經點marker
其實這個途經點，可以做成像百度地圖首頁的駕車導航那樣，有紅綠色的起點終點圖標。如下圖：
注意：這一點，大家隨意，大家想加marker（可以更換任意的icon圖片），或者想加label，甚至是別的什么覆蓋物，都是OK的。
API技術咨詢 請先下載百度HI聊天工具 JS版HI群:1357363 移動版HI群:1363111
但是呢，我還是喜歡紅色的標注啦，我還可以加上文字標注。
所以，我簡單地用紅色marker加label來表示了。如下圖。
添加marker和label的代碼如下：
var m1 = new BMap.Marker(myP1); //創建3個marker var m2 = new BMap.Marker(myP2); var m3 = new BMap.Marker(myP3); map.addOverlay(m1); map.addOverlay(m2); map.addOverlay(m3); var lab1 = new BMap.Label("起點",{position:myP1}); //創建3個label var lab2 = new BMap.Label("途徑點",{position:myP2}); var lab3 = new BMap.Label("終點",{position:myP3}); map.addOverlay(lab1); map.addOverlay(lab2); map.addOverlay(lab3);
五、調整到最佳視野
個人認為setViewport是個非常有用的好東西。因為它可以把你的標注展示到一個最完美的視野內。
如果不加setViewport，你的地圖可能只會出現一半的有效視野，而不是完整的3個標注都有。如下圖：
代碼很簡單，先來看看類參考：
就是說，只要有點對象數組傳進去，系統就會幫你完成最佳視野的展示??！
map.setViewport([myP1,myP2,myP3]); //調整到最佳視野
小貼士：你可以做一個延時動畫，讓最佳視野的展示更漂亮！
另外，marker也是可以有動畫的，不要忽略了。詳見：http://dev.baidu.com/wiki/static/map/API/examples/?v=1.2&3_1
六、完整代碼
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>駕車途經點</title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> </head> <body> <p><input type='button' value='開始' onclick='run();' /></p> <div id="container"></div>
</body> </html> <script type="text/javascript"> var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 13); map.addControl(new BMap.NavigationControl()); // 添加平移縮放控件 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 map.addControl(new BMap.OverviewMapControl()); //添加縮略地圖控件 var myP1 = new BMap.Point(106.521436,29.532288); //起點-重慶 var myP2 = new BMap.Point(108.983569,34.285675); //終點-西安 var myP3 = new BMap.Point(116.404449,39.920423); //終點-北京 window.run = function (){ map.clearOverlays(); //清除地圖上所有的覆蓋物 var driving = new BMap.DrivingRoute(map); //創建駕車實例 driving.search(myP1, myP2); //第一個駕車搜索 driving.search(myP2, myP3); //第二個駕車搜索 driving.setSearchCompleteCallback(function(){ var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通過駕車實例，獲得一系列點的數組 var polyline = new BMap.Polyline(pts); map.addOverlay(polyline); var m1 = new BMap.Marker(myP1); //創建3個marker var m2 = new BMap.Marker(myP2); var m3 = new BMap.Marker(myP3); map.addOverlay(m1); map.addOverlay(m2); map.addOverlay(m3); var lab1 = new BMap.Label("起點",{position:myP1}); //創建3個label var lab2 = new BMap.Label("途徑點",{position:myP2}); var lab3 = new BMap.Label("終點",{position:myP3}); map.addOverlay(lab1); map.addOverlay(lab2); map.addOverlay(lab3); setTimeout(function(){ map.setViewport([myP1,myP2,myP3]); //調整到最佳視野 },1000); }); } </script>
總結
以上是生活随笔為你收集整理的【百度地图API】如何制作多途经点的线路导航——驾车篇的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python 定义数字_Python：已
- 下一篇： 各镜像源地址