Google Map API使用詳解(十九)——實現Google Map本地搜尋方塊(上)

來源:互聯網
上載者:User

1、 使用Google Map API中的GMap2類的控制項

在提到地圖上的預設控制項和GMap2的設定項的時候,我都提過Google地圖的本地搜尋欄控制項,要在地圖上加上這個控制項其實很簡單,不需要調用GMap2.addControl(),只需要一句話:

map.enableGoogleBar();

這樣就可以在地圖的左下角加上這個搜尋欄了,並且替換掉了原來的GoogleLogo的圖片。目前用這個搜尋欄可以搜尋兩種類型的資料:

1)地名;

2)Google提供的商業資料,比如“餐館”。預設是在當前顯示的地圖範圍內搜尋;具體的搜尋結果是上面的哪種類型由你輸入的關鍵字決定,沒有什麼特別的方法。搜尋返回結果後會自動在地圖上加上所有結果的標記,同時會用DOM形式顯示這個搜尋結果,至於DOM會是什麼樣的形式展現,接著看就知道了。

定製這個搜尋欄對應的類是GGoogleBarOptions,沒有建構函式,對應一個物件變數,使用方式類似於使用GMapOptions定製Google地圖,不過GGoogleBarOptions是作為GMapOptions裡的一項在建立GMap2對象的時候使用。如果你瞭解過Google AJAX Search API的話,你對下面這些設定項會很熟悉,因為,這個本地搜尋欄就是對AJAX Search中的GLocalSearchControl的一個封裝。

先看幾個基本的設定項:

1)  showOnLoad

這個是boolean類型的項,決定載入完成後搜尋欄的顯示狀態,預設是false,意思是搜尋欄是閉合的,不顯示輸入框,如果你想提醒使用者這裡有個輸入框可以搜尋,可以把這一項設成true,即{showOnLoad:true};

2)  linkTarget

簡單的說,這個就是搜尋結果裡每一條記錄對應link的target屬性值,四個可選值,預設是等價於target="blank_"的G_GOOGLEBAR_LINK_TARGET,其他還有parent, self, top這幾項,準確的參數我就不列了,開發文檔裡有。不過這一項基本用不著,不用設定;

3)  resultList

用來指定搜尋結果的DOM顯示樣式,預設是用列表的方式顯示(G_GOOGLEBAR_RESULT_LIST_INLINE),還有一種是添加一對方向箭頭讓你逐個翻閱,就像右邊的地圖裡顯示的那樣。如果你的地圖空間比較小的話可以用後一種,設定{resultList:G_GOOGLEBAR_RESULT_LIST_SUPPRESS};

4)  suppressInitialResultSelection

這個用來指定搜尋完成後是否自動選中第一個搜尋結果並且開啟它的資訊視窗,預設是false,就是開啟第一條記錄的資訊視窗,不需要的話就指定{suppressInitialResultSelection:true};

5)  suppressZoomToBounds

按照文檔的說法,這個用來設定搜尋完成後是否需要地圖自動縮放移到來完整顯示所有的標記點,預設是false,不縮放的,不過我在試用時發現不管搜尋結果如何,地圖都不會縮放。所以,暫時忽略這一項。

6)  searchFormHint

這個在文檔裡沒有列出來,但是也可以使用,用來設定輸入框處於非啟用狀態時的提示,預設的是“搜尋地圖”,你也可以設成你自己的提示,比如:{searchFormHint:"hi,在這裡可以直接搜尋地圖"}

再來看幾個用來設定搜尋操作時的回呼函數,類似於事件監聽,這幾個可以做很多文章:

1)  onIdleCallback

這個在搜尋結果被清除的時候調用,也就是在你點擊搜尋結果上的“清除結果”這個連結後,是不是在本次搜尋結果返回並且自動清除上一次搜尋結果後調用我還不確定,看開發文檔似乎有這個意思。

2)  onSearchCompleteCallback

在已經得到搜尋結果但是還沒有添加到地圖上的時候調用,會傳遞一個GlocalSearch對象作為參數,GlocalSearch是Google AJAX Search API裡定義的一個類,想瞭解的先去看文檔吧,我就不多說了。

3)  onGenerateMarkerHtmlCallback

在開啟一條搜尋記錄的資訊視窗前會被調用,傳入marker, html, result三個參數,分別對應這條記錄在地圖上的標記(GMarker)、填充資訊視窗的html字串、對應的搜尋結果(GlocalResult)。這裡定義的回調方法必須返回一個DOM對象,用在開啟的資訊視窗中。所以,通過這一項的設定,你就可以更改搜尋結果的資訊視窗裡的預設內容了。右邊的地圖裡就把預設的資訊視窗內容換了,去掉了“從這裡來”、“到這裡去”的連結,加上了一個靜態地圖。

4)  onMarkersSetCallback

這個在所有的結果標記都已經建立但還沒有添加到 地圖之前調用,傳入的參數是一個搜尋結果的數組results,數組裡的每一項對應一條搜尋記錄,包括latLng, marker, result,對應結果的座標GLatLng、標記GMarker、結果記錄GlocalResult。這個時候結果的顯示列表已經建立完成了,所以,如果你想修 改這個現實結果不妨試試這個設定項。
   (待續)

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.