天天看點

【百度地圖API】讓使用者選擇起點和終點的駕車導航

摘要:

  如果使用者搜尋“從機場到火車站”,使用駕車導航DrivingRoute會預設顯示一條結果。但同一個城市可能有多個機場和火車站,那麼,如何用可視化的方法讓使用者自己選擇起點和終點呢?答案是,使用資料接口。資料接口,可以讓百度地圖API的資料,按照自定義的形式展示。

  這個功能非常實用,學會這個方法,可以讓您的地圖更加接近百度地圖的功能!!

-----------------------------------------------------------------------------------------------------------

【百度地圖API】讓使用者選擇起點和終點的駕車導航

---------------------------------------------------------------------------------------------------------------

一、建立地圖與網頁樣式

建立一張簡單的地圖,隻需要3句話。

  

然後,我們制作出兩個輸入框,分别是起點輸入框,和終點輸入框。

使用“駕車”按鈕,擷取輸入框中的資料。

【百度地圖API】讓使用者選擇起點和終點的駕車導航

二、建立搜尋執行個體

對于起點和終點,我們需要建立2個不同的搜尋執行個體:

在點選“駕車”按鈕後,開始搜尋起點和終點都有哪些符合關鍵詞的地方(POI點)。

三、搜尋的資料接口

由于AJAX是異步加載的,我們使用百度地圖API提供的回調函數onSearchComplete,來完成對搜尋成功後的操作。

【百度地圖API】讓使用者選擇起點和終點的駕車導航

以起點的搜尋為例:

當搜尋成功後,把每一個搜尋結果(POI),按照我們自定義的方式,列在面闆中。其實,這裡我們隻使用了資料接口,沒用百度預設的結果面闆。

當使用者滑鼠移到起點面闆的标題處,我們在地圖上打開一個資訊視窗。裡面放“選為起點”的按鈕。

【百度地圖API】讓使用者選擇起點和終點的駕車導航

使用者點選“選為起點”的按鈕後,標明該點為起點,并隐藏起點面闆,讓使用者選擇終點。

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

【百度地圖API】讓使用者選擇起點和終點的駕車導航

同理,制作終點的面闆。這裡需要注意的是,終點和起點不同,選擇終點之後,需要建立一個駕車執行個體,并且繪制出駕車路線。

是以要做一個判斷,使用者是否已經選擇了起點。如果沒有,提示使用者要先選擇起點。

【百度地圖API】讓使用者選擇起點和終點的駕車導航

四、建立駕車執行個體和結果面闆

在選擇完畢确定的終點和起點後,駕車的結果就明了了。

一句話,輕松搞定。

【百度地圖API】讓使用者選擇起點和終點的駕車導航

五、頁面樣式完善

為了讓頁面幹淨好看,我們可以把不必要的結果展示暫時隐藏起來,當需要它們的時候,再展開。

1、比如,先把地圖和搜尋框以外的結果面闆隐藏起來。

我使用了hidden樣式,來隐藏右邊的面闆boxpanel。

 

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

【百度地圖API】讓使用者選擇起點和終點的駕車導航

2、清除上次駕車查詢結果

如果你要再次使用駕車查詢,一定要先清除上次駕車查詢的結果:

也可以使用clearOverlays,一次性清除地圖上所有的覆寫物。

另外,補充一個清除覆寫物的知識:

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

清除單個标注,用map.removeOverlay(marker); 

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

附,全部源代碼:

繼續閱讀