【百度地图API】如何制作多途经点的线路导航——驾车篇
摘要：
休假結(jié)束，酸奶×××要從重慶駕車去北京?？墒?strong>途中要去西安奶奶家拿牛奶餅干呢！用百度地圖API，能不能幫我實現(xiàn)這個愿望呢？
------------------------------------------------------------------------------------------------------------------------
一、創(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()); ? ? ? ? ? ? ?//添加縮略地圖控件
我手工找到的重慶、西安、北京三個城市的坐標(biāo)點，使用坐標(biāo)拾取工具（請點擊）可以輕松找到這三個經(jīng)緯度。
當(dāng)然，你也可以使用localsearch類的search方法。這個可以隨意。
找到坐標(biāo)點之后，創(chuàng)建三個點對象。
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); ? ?//終點-北京
二、創(chuàng)建一個駕車導(dǎo)航和兩個駕車搜索
好啦，現(xiàn)在來創(chuàng)建一個駕車導(dǎo)航吧~
這句話是不是很簡單？用這句話就可以創(chuàng)建駕車導(dǎo)航啦。
var?driving?=?new?BMap.DrivingRoute(map);????//創(chuàng)建駕車實例
然后寫兩個搜索方法：
第一個是搜索從重慶到西安的，第二個是從西安到北京的。
driving.search(myP1, myP2); ? ? ? ? ? ? ? ? //第一個駕車搜索driving.search(myP2, myP3); ? ? ? ? ? ? ? ? //第二個駕車搜索
三、自己繪制折線
接下來，我們在回調(diào)函數(shù)setSearchCompleteCallback中，把搜索完畢的路線繪制出來。
注意哦，這里是兩個搜索的路線都繪制出來了哦~~
就這么簡單的三句話，很簡單吧。
第一句、獲取數(shù)組
第二句、創(chuàng)建折線
第三句、添加折線覆蓋物
driving.setSearchCompleteCallback(function(){var?pts?=?driving.getResults().getPlan(0).getRoute(0).getPath();????//通過駕車實例，獲得一系列點的數(shù)組var?polyline?=?new?BMap.Polyline(pts);?????map.addOverlay(polyline); }這個時候，整個駕車導(dǎo)航就是這個樣子滴，簡直充滿了喜感，像一條蚯蚓呢 ?O(∩_∩)O~
四、添加起點、終點、途經(jīng)點marker
其實這個途經(jīng)點，可以做成像百度地圖首頁的駕車導(dǎo)航那樣，有紅綠色的起點終點圖標(biāo)。如下圖：
注意：這一點，大家隨意，大家想加marker（可以更換任意的icon圖片），或者想加label，甚至是別的什么覆蓋物，都是OK的。
API技術(shù)咨詢請先下載百度HI聊天工具
JS版HI群:1357363
移動版HI群:1363111
但是呢，我還是喜歡紅色的標(biāo)注啦，我還可以加上文字標(biāo)注。
所以，我簡單地用紅色marker加label來表示了。如下圖。
添加marker和label的代碼如下：
var?m1?=?new?BMap.Marker(myP1);?????????//創(chuàng)建3個markervar?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});????????//創(chuàng)建3個labelvar?lab2?=?new?BMap.Label("途徑點",{position:myP2});var?lab3?=?new?BMap.Label("終點",{position:myP3});???map.addOverlay(lab1);map.addOverlay(lab2);map.addOverlay(lab3);五、調(diào)整到最佳視野
個人認(rèn)為setViewport是個非常有用的好東西。因為它可以把你的標(biāo)注展示到一個最完美的視野內(nèi)。
如果不加setViewport，你的地圖可能只會出現(xiàn)一半的有效視野，而不是完整的3個標(biāo)注都有。如下圖：
代碼很簡單，先來看看類參考：
就是說，只要有點對象數(shù)組傳進去，系統(tǒng)就會幫你完成最佳視野的展示！！
map.setViewport([myP1,myP2,myP3]);??????????//調(diào)整到最佳視野小貼士：你可以做一個延時動畫，讓最佳視野的展示更漂亮！
另外，marker也是可以有動畫的，不要忽略了。詳見：http://dev.baidu.com/wiki/static/map/API/examples/?v=1.2&3_1#3&1
六、完整代碼
<!DOCTYPE?html> <html> <head> <meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312"?/> <title>駕車途經(jīng)點</title> <script?type="text/javascript"?src="http://api.map.baidu.com/api?v=1.2"></script> </head> <body> <p><input?type='button'?value='開始'?οnclick='run();'?/></p> <div?style="width:820px;height:500px;border:1px?solid?gray"?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);????//創(chuàng)建駕車實例driving.search(myP1,?myP2);?????????????????//第一個駕車搜索driving.search(myP2,?myP3);?????????????????//第二個駕車搜索driving.setSearchCompleteCallback(function(){var?pts?=?driving.getResults().getPlan(0).getRoute(0).getPath();????//通過駕車實例，獲得一系列點的數(shù)組var?polyline?=?new?BMap.Polyline(pts);?????map.addOverlay(polyline);var?m1?=?new?BMap.Marker(myP1);?????????//創(chuàng)建3個markervar?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});????????//創(chuàng)建3個labelvar?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]);??????????//調(diào)整到最佳視野},1000);}); } </script>轉(zhuǎn)載于:https://blog.51cto.com/8920932/1537191
總結(jié)
以上是生活随笔為你收集整理的【百度地图API】如何制作多途经点的线路导航——驾车篇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数据库操作错误：删除对于用户'root'
- 下一篇： 【2011.9.20】Spring配置文