有声小说下载,小说网

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

百度地圖API怎么制作駕車導(dǎo)航

這篇文章主要講解了“百度地圖API怎么制作駕車導(dǎo)航”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“百度地圖API怎么制作駕車導(dǎo)航”吧！

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、成都網(wǎng)站設(shè)計、成都外貿(mào)網(wǎng)站建設(shè)、定結(jié)網(wǎng)絡(luò)推廣、成都小程序開發(fā)、定結(jié)網(wǎng)絡(luò)營銷、定結(jié)企業(yè)策劃、定結(jié)品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供定結(jié)建站搭建服務(wù)，24小時服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com

一、創(chuàng)建地圖與網(wǎng)頁樣式

創(chuàng)建一張簡單的地圖，只需要3句話。

varmap =newBMap.Map("container"); //創(chuàng)建Map實例  varpoint =newBMap.Point(116.404, 39.915); //創(chuàng)建點坐標  map.centerAndZoom(point,15); //初始化地圖,設(shè)置中心點坐標和地圖級別。

然后，我們制作出兩個輸入框，分別是起點輸入框，和終點輸入框。

從到

使用“駕車”按鈕，獲取輸入框中的數(shù)據(jù)。

functionmDriving(){varstartPlace =document.getElementById("startInput").value;varendPlace =document.getElementById("endInput").value;}

百度地圖API怎么制作駕車導(dǎo)航

二、創(chuàng)建搜索實例

對于起點和終點，我們需要創(chuàng)建2個不同的搜索實例：

//創(chuàng)建2個搜索實例  varstartSearch =newBMap.LocalSearch(map,startOption);varendSearch =newBMap.LocalSearch(map,endOption);

在點擊“駕車”按鈕后，開始搜索起點和終點都有哪些符合關(guān)鍵詞的地方（POI點）。

functionmDriving(){varstartPlace =document.getElementById("startInput").value;varendPlace =document.getElementById("endInput").value;  startSearch.search(startPlace);  endSearch.search(endPlace);  document.getElementById("box").style.display="block";  }

三、搜索的數(shù)據(jù)接口

由于AJAX是異步加載的，我們使用百度地圖API提供的回調(diào)函數(shù)onSearchComplete，來完成對搜索成功后的操作。

百度地圖API怎么制作駕車導(dǎo)航

以起點的搜索為例：

當搜索成功后，把每一個搜索結(jié)果（POI），按照我們自定義的方式，列在面板中。其實，這里我們只使用了數(shù)據(jù)接口，沒用百度默認的結(jié)果面板。

varstartOption ={  onSearchComplete: function(results){//判斷狀態(tài)是否正確if(startSearch.getStatus() ==BMAP_STATUS_SUCCESS){  startResults =results;vars =[];for(vari =0;i ");  s.push(results.getPoi(i).title);  s.push("
");  s.push(results.getPoi(i).address);  s.push("

"); } document.getElementById("startPanel").innerHTML =s.join(""); }else{startResults =null;} } };

當用戶鼠標移到起點面板的標題處，我們在地圖上打開一個信息窗口。里面放“選為起點”的按鈕。

varstartInfowin =newBMap.InfoWindow("
");

百度地圖API怎么制作駕車導(dǎo)航

用戶點擊“選為起點”的按鈕后，選定該點為起點，并隱藏起點面板，讓用戶選擇終點。

為了方便看清起點的位置，我們需要在地圖上打個紅色的標注。并且，再次選擇起點時，要清楚上一次的標注。

functionstartDeter(){  map.clearOverlays();  startPoint =startInfowin.getPosition();varmarker =newBMap.Marker(startPoint);  map.addOverlay(marker);  document.getElementById("startPanel").style.display="none";  }

百度地圖API怎么制作駕車導(dǎo)航

同理，制作終點的面板。這里需要注意的是，終點和起點不同，選擇終點之后，需要創(chuàng)建一個駕車實例，并且繪制出駕車路線。

所以要做一個判斷，用戶是否已經(jīng)選擇了起點。如果沒有，提示用戶要先選擇起點。

functionendDeter(){ if(startPoint==null){alert("請先選擇起點！");}else{  endPoint =endInfowin.getPosition();  driving.search(startPoint,endPoint);  document.getElementById("endPanel").style.display="none";  }  }

百度地圖API怎么制作駕車導(dǎo)航

四、創(chuàng)建駕車實例和結(jié)果面板

在選擇完畢確定的終點和起點后，駕車的結(jié)果就明了了。

一句話，輕松搞定。

vardriving =newBMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true,panel:drivingPanel}});

百度地圖API怎么制作駕車導(dǎo)航

五、頁面樣式完善

為了讓頁面干凈好看，我們可以把不必要的結(jié)果展示暫時隱藏起來，當需要它們的時候，再展開。

1、比如，先把地圖和搜索框以外的結(jié)果面板隱藏起來。

我使用了hidden樣式，來隱藏右邊的面板boxpanel。

.hidden{display:none;}  中間省略

對起點選擇和終點選擇面板，采取使用時“展開”，選取完畢即刻隱藏的辦法。例如，

起點選擇 (展開)

百度地圖API怎么制作駕車導(dǎo)航

2、清除上次駕車查詢結(jié)果

如果你要再次使用駕車查詢，一定要先清除上次駕車查詢的結(jié)果：driving.clearResults();

也可以使用clearOverlays,一次性清除地圖上所有的覆蓋物。map.clearOverlays();

另外，補充一個清除覆蓋物的知識：

清除地圖上所有的標記，用map.clearOverlays();

清除單個標注，用map.removeOverlay(marker);

顯示和隱藏自定義覆蓋物，可以繼承overlay的hide();或者show()方法。

附，全部源代碼：

    指定起點與終點的駕車導(dǎo)航       從到

新聞中心

起點選擇 (展開)

起點選擇 (展開)

終點選擇 (展開)

駕車導(dǎo)航

其他資訊