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

---------------------------------------------------------------------------------------------------------------
一、建立地圖與網頁樣式
建立一張簡單的地圖,隻需要3句話。
然後,我們制作出兩個輸入框,分别是起點輸入框,和終點輸入框。
使用“駕車”按鈕,擷取輸入框中的資料。
二、建立搜尋執行個體
對于起點和終點,我們需要建立2個不同的搜尋執行個體:
在點選“駕車”按鈕後,開始搜尋起點和終點都有哪些符合關鍵詞的地方(POI點)。
三、搜尋的資料接口
由于AJAX是異步加載的,我們使用百度地圖API提供的回調函數onSearchComplete,來完成對搜尋成功後的操作。
以起點的搜尋為例:
當搜尋成功後,把每一個搜尋結果(POI),按照我們自定義的方式,列在面闆中。其實,這裡我們隻使用了資料接口,沒用百度預設的結果面闆。
當使用者滑鼠移到起點面闆的标題處,我們在地圖上打開一個資訊視窗。裡面放“選為起點”的按鈕。
使用者點選“選為起點”的按鈕後,標明該點為起點,并隐藏起點面闆,讓使用者選擇終點。
為了友善看清起點的位置,我們需要在地圖上打個紅色的标注。并且,再次選擇起點時,要清楚上一次的标注。
同理,制作終點的面闆。這裡需要注意的是,終點和起點不同,選擇終點之後,需要建立一個駕車執行個體,并且繪制出駕車路線。
是以要做一個判斷,使用者是否已經選擇了起點。如果沒有,提示使用者要先選擇起點。
四、建立駕車執行個體和結果面闆
在選擇完畢确定的終點和起點後,駕車的結果就明了了。
一句話,輕松搞定。
五、頁面樣式完善
為了讓頁面幹淨好看,我們可以把不必要的結果展示暫時隐藏起來,當需要它們的時候,再展開。
1、比如,先把地圖和搜尋框以外的結果面闆隐藏起來。
我使用了hidden樣式,來隐藏右邊的面闆boxpanel。
對起點選擇和終點選擇面闆,采取使用時“展開”,選取完畢即刻隐藏的辦法。例如,
2、清除上次駕車查詢結果
如果你要再次使用駕車查詢,一定要先清除上次駕車查詢的結果:
也可以使用clearOverlays,一次性清除地圖上所有的覆寫物。
另外,補充一個清除覆寫物的知識:
清除地圖上所有的标記,用map.clearOverlays();
清除單個标注,用map.removeOverlay(marker);
顯示和隐藏自定義覆寫物,可以繼承overlay的hide();或者show()方法。
附,全部源代碼: