在網頁中輕鬆插入google map地圖

Google Map 是什麼?這是Google公司(谷歌)推出的一項地圖服務,我私下把它歸爲一種GIS服務。它不僅僅是一幅簡單的電子地圖圖片,而是一種互動的、內涵豐富的GIS集成。當你打開http://maps.google.com/ 就能看到美利堅合衆國的版圖——Google公司是美國的,他們當然要首先展示自己的祖國。該頁面上的地圖標註全是英文。去年我還曾經很困惑,爲何沒有中文版?畢竟母語還是方便啊。前不久,看到一個大好消息,2007年2月9日,Google推出了中文版地圖。

Google的地圖不僅展示常規地圖的外觀,而且可以隨時切換到“衛星地圖”狀態,查看真實的地貌。這一點得益於2004年他們富有遠見地收購了Keyhole地圖公司。在Google的地圖上,用戶可以搜索地名或者郵編,從而迅速定位。當然,你也可以用鼠標拖動地圖,瀏覽一遍全球的山山水水,還可以查詢從甲地至乙地的詳細路線。爲了方便其他網站在網頁中插入互動的Google地圖而不是jpg格式圖片,Google推出了專用API接口。不過,目前只支持英文版的地圖。剛纔我還看了一下官方網站,確認目前Google 地圖中不支持中文版的API。

這個地圖是怎麼插入到網頁中去的呢?這就要說到一個Joomla的小插件,也叫觸發器——Plugin GoogleMaps for Joomla。該觸發器只有10Kb大小,安裝併發布之後,就能遵照它的語法通過一句代碼插入地球上任意一處的Google地圖到網頁中。

不過,僅僅安裝這個觸發器是不夠的。爲了避免地圖資源被濫用造成服務器癱瘓,Google規定網站要插入他們的地圖,必須申請Google Maps API Key,並且僅限於頂級域名。也就是說,使用http://localhost/ 這樣的本地測試服務器或者http://www.joomlagate.com/~user8868 這樣的二級域名的用戶無法享用這一服務。這個Key當然也是免費的,申請的網址是:http://www.google.com/apis/maps/signup.html 。

注意:在申請這個Key的時候,還要求你同時擁有一個Google帳戶,也就是一個@gmail.com 或者 @google.com 的信箱。Gmail信箱也是免費註冊的,如果哪位讀者還沒有邀請函,可以到本站論壇發帖,我送你一個邀請(先到先得,送完即止,呵呵)

拿到了Google Maps API Key,安裝了Plugin GoogleMaps for Joomla觸發器,我們就可以動手了。

參數設置

首先在網站後臺點擊此觸發器的名稱進入其參數設置頁面。在這裏,設置一些參數的默認值。你可以修改下列參數中的任何一個,當然你也可以什麼都不填,在插入代碼時還可以直接附帶參數:

width(寬度), height(高度):設置一個你想要的數值,不過如果太小地圖展示的畫面就太少了。 
你必須在數字後面緊接着填寫其單位,例如 100% 或 400px 
lon(經度), lat(緯度):可以通過搜索來確定這個座標值(搜索時可能需要包括街道,門牌號,郵編,城市名稱以及國家名稱) 
zoom(縮放):可以選擇 Google Maps API 中規定的任何選項. 
zoomType(縮放類型):可選 Small 或者 Large, 這個選項控制地圖上展示的縮放工具類型,或者選擇 None 則不顯示縮放工具。 
zoomNew:設爲 1 表示在地圖上雙擊鼠標後連續放大,設爲 0 則表示在地圖中央每點擊一次鼠標,只放大一次。(默認爲 0) 
mapType(地圖類型):可以選 Normal (正常地圖,默認值), Satellite(衛星地圖) 或 Hybrid(混合地圖). 
showMaptype(顯示地圖類型):設爲 0 表示地圖上不顯示地圖類型選擇按鈕,設爲 1 則會在地圖上顯示地圖類型的選擇按鈕(默認是 1) 
Overview(概覽):設爲 0 表示在地圖右下角沒有概覽窗,設爲 1 表示那個位置有概覽窗,設爲 2 表示概覽功能啓用,但是初始化時處於隱藏狀態。(默認是 0) 
text(文字):這個文字用作地標。文字將以氣球的樣式顯示在地圖上.如果你不想讓文字出現,只需設置爲 text=" 就行了。文字如果顯示,將位於地圖中的某個指定位置的“圖釘”標記上方。通常情況下,這裏的文字用於顯示地址或者一個超級鏈接。 要在此處使用超級鏈接,請用如下格式: <a href=linkAddress target=linkTarget title=linkTitle>linkName</a>. 千萬不要使用雙引號! 
marker(地標):表示在展示地圖時打開信息窗 (1,默認)還是關閉信息窗(0)。 
tooltip(提示):表示當鼠標指向地標時,可以顯示一個氣泡樣的提示信息(不要使用 HTML) 
address(地址):此處填寫的地址用於搜索某個座標(經度/緯度 爲空時) 
align(對齊方式):地圖在網頁中放置的位置,三個選項 left(左對齊), right(右對齊)或者 center(居中) 
key:表示Google Map API Key (可選). 你可以在後臺設定,也可以在網頁中插入觸發器代碼時再填寫這個key。如果你還沒有 Google Maps Key,那麼點擊這裏註冊一個. 

在網頁中插入代碼

在Joomla網頁上,你可以在任何位置——不管是簡介文字還是正文部分——利用帶有參數的{mosmap}標記來插入一幅Google地圖。語法(爲了防止自動轉換成地圖,我把代碼兩端的大括號改變了一下,複製後請修改):

 

{mosmap width='500'|height='400'|lat='52.0523'|lon='4.4471'| zoom='3'|zoomType='Large'|zoomNew='0'|mapType='Satellite'|showMaptype='1'| overview='0'|text='sv DWO'|tooltip='DWO'|marker='1'| align='center'|key='googlekey'}

 

這段代碼中的各個參數其含義已經在上面解釋過,相鄰兩個參數之間用豎線隔開。如果不附帶任何參數,那麼單單一個{mosmap}標記只能顯示後臺默認參數所確定的地圖。也就是說,插入的地圖都是一樣的。爲了針對不同地點插入不同地區的地圖,就必須至少附帶一個經度、一個緯度兩個參數來確定一個位置。

 

插入之後檢查一下該頁面的 html 代碼,以確認在{和 }之間沒有 <br /> 或含有一個回車符. 觸發器命令必須在同一行!在同一個頁面中,可以用一次,兩次,或者多次來顯示源於多個地點的多個地圖。比如,現在你閱讀的這個頁面中就插入了兩幅地圖,並且大小不同。

還有一個問題,那就是如何知道你要展示的位置的精確座標?又一個辦法就是從Google Map官方網站找到該位置然後複製其座標。我建議你使用Google Earth軟件,安裝到電腦上以後,可以展示更豐富的地圖信息,當鼠標指向地球上的任意位置時,該軟件的狀態欄就會自動顯示該地的經度和緯度。

補充:有人問我上面地圖中的氣泡裏面,“三秦人家飯店”這個超級鏈接怎麼實現。很簡單,在插入地圖代碼時,text='' 這個參數中可以插入HTML標記,那麼我們用<a>標記就能插入一個鏈接,用<br/>標記就能插入一個換行符。提醒一點:在<a>標記裏面的 href='' 這裏,一定要用單引號,不要用雙引號。如果你希望該鏈接在新窗口中打開,還要在 <a> 標記裏面加上 target='_blank' 屬性,同樣是單引號。

怎麼樣?利用Plugin GoogleMaps插入地圖非常方便,美中不足的就是Google還沒有提供中文地圖API,否則我們看到的地圖就更親切了。此插件最新版本是2.6版,本站已經提供簡體中文版下載。

Google Map現在不僅有了移動版Google Map Mobile,而且支持顯示實時交通擁堵情況。相信以後通過API在網頁中可以使用更多地圖功能。在此白某也希望國內的編程高手能夠以Google Maps爲基礎繼續改進,爲我們開發出更多新酷功能。請參考Google Maps API 說明

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章