【百度地圖API】製做多途經點的線路導航——路線座標規劃

時間 2019-11-10

標籤百度地圖API 製做途經線路導航路線座標規劃简体版

原文原文鏈接

1、建立地圖javascript

首先要告訴你們的是，API1.2版本取消密鑰，取消服務設置，你們能夠採用更加簡短的方式引用API的JS啦~php

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>

你們跟我一塊兒來建立一張簡單的地圖：html

var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);

而後爲地圖加上一些合適的控件：java

map.addControl(new BMap.NavigationControl()); // 添加平移縮放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加縮略地圖控件

我手工找到的重慶、西安、北京三個城市的座標點，使用座標拾取工具（請點擊）能夠輕鬆找到這三個經緯度。api

固然，你也可使用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); //終點-北京

2、建立一個駕車導航和兩個駕車搜索工具

好啦，如今來建立一個駕車導航吧~動畫

這句話是否是很簡單？用這句話就能夠建立駕車導航啦。ui

var driving = new BMap.DrivingRoute(map); //建立駕車實例

而後寫兩個搜索方法：

第一個是搜索從重慶到西安的，第二個是從西安到北京的。

driving.search(myP1, myP2);                 //第一個駕車搜索
driving.search(myP2, myP3); //第二個駕車搜索

3、本身繪製折線

接下來，咱們在回調函數setSearchCompleteCallback中，把搜索完畢的路線繪製出來。

注意哦，這裏是兩個搜索的路線都繪製出來了哦~~

就這麼簡單的三句話，很簡單吧。

第一句、獲取數組

第二句、建立折線

第三句、添加折線覆蓋物

    driving.setSearchCompleteCallback(function(){
 var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //經過駕車實例，得到一系列點的數組

 var polyline = new BMap.Polyline(pts); 
 map.addOverlay(polyline);

這個時候，整個駕車導航就是這個樣子滴，簡直充滿了喜感，像一條蚯蚓呢 O(∩_∩)O~

4、添加起點、終點、途經點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);

5、調整到最佳視野

我的認爲setViewport是個很是有用的好東西。由於它能夠把你的標註展現到一個最完美的視野內。

若是不加setViewport，你的地圖可能只會出現一半的有效視野，而不是完整的3個標註都有。以下圖：

代碼很簡單，先來看看類參考：

就是說，只要有點對象數組傳進去，系統就會幫你完成最佳視野的展現！！

map.setViewport([myP1,myP2,myP3]);          //調整到最佳視野

小貼士：你能夠作一個延時動畫，讓最佳視野的展現更漂亮！　

另外，marker也是能夠有動畫的，不要忽略了。詳見：http://dev.baidu.com/wiki/static/map/API/examples/?v=1.2&3_1#3&1　

6、完整代碼

<!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 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); //建立駕車實例
 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。