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