google_map_api_開(kāi)發(fā)快速入門(mén)
Google Map開(kāi)發(fā)整理Google Maps API 是 Google 自己推出編程 API ,可以讓全世界對(duì) Google Maps 有興趣的程序設(shè)計(jì)師自行開(kāi)發(fā)基于 Google Maps 的
Google Map開(kāi)發(fā)整理
Google Maps API 是 Google 自己推出編程 API ,可以讓全世界對(duì) Google Maps 有興趣的程序設(shè)計(jì)師自行開(kāi)發(fā)基于 Google Maps 的服務(wù),建立自己的地圖網(wǎng)站。以下是我在 Google Maps API 開(kāi)發(fā)過(guò)程中找到的一些 API 的編程資源,包括中文文檔,中文說(shuō)明,示例等等,希望對(duì) Google Maps 編程感興趣的程序員有所幫助。
中文資料部分 (包括中文的文檔說(shuō)明等,以下的網(wǎng)址都是中文內(nèi)容。) 下面的關(guān)于 API 的中文文檔
Google Maps API 第 2 版中文文
檔 Google Maps API 第 2 版升級(jí)指
南 Google Maps API 第 2 版類(lèi)參考 另外一個(gè)版本的 Google Maps API 2 中文文
檔 Google Maps API 第 1 版中文文
檔 下面是關(guān)于 KML 文件的中文文檔
Google Earth KML 中文說(shuō)明(一) Google Earth KML 中文說(shuō)明(二) Google Earth KML 中文說(shuō)明(基于 Google Earth 客戶(hù)端版本 3.0 的 KML 版本 2.0 ) 英文資料部分 (主要是 Google 官方的文檔說(shuō)明,如果覺(jué)得中文翻譯的有問(wèn)題,也可以看看這些原始內(nèi)容。 )
Google Maps API 官方網(wǎng) Google Maps API 英文文檔 Google Maps API 官方 Blog
,Google Maps API 論壇 Google KML 的官方文檔 Google API 官方網(wǎng) 附: Google Map API 中文開(kāi)發(fā)教程
Google Map API 中文開(kāi)發(fā)教程最好的教程還是 google 官方的說(shuō)明文檔,而且配有詳細(xì)的例子,供大家學(xué)習(xí),下面是文檔的英文原文連接
目錄包括
1.
2. 1. 2. 3. 4. 5. 6. 7. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 1. 3. 1.
,2.
1.
2. 1. 1. 2. 3. 4. 5. 6. 7. 3. 4.
同步中文文檔請(qǐng)參閱: 谷歌地圖API 密鑰(API Key)的解讀和使用技巧 好了,通過(guò)前一篇的介紹,大家對(duì)Google Map都有所瞭解了吧。不過(guò)還得一步步的來(lái)。先瞭解API Key 吧。所謂 API 密鑰( API Key ),其實(shí)就是一個(gè)字符串,在使用 script 標(biāo)簽導(dǎo)入 API 類(lèi)庫(kù)的時(shí)候作為請(qǐng)求參數(shù)傳給谷歌的地圖服務(wù)器,形式就是:
我的API Key是:
ABQIAAAAMWyR7XvYN8KE9N6m_jcU4BRlfWJrPzRGiYSzS4l55_z1ea3VShRolPwARGHvivnEFRLVGXyIlsrYpA
使用谷歌地圖 API 的第一步就是要 API 密鑰, API 使用條款對(duì)這個(gè)密鑰的用途有很正式的說(shuō)明,其實(shí)總結(jié)起來(lái)也很簡(jiǎn)單:
1 、谷歌地圖 API 提供的服務(wù)是免費(fèi)的,對(duì)于通過(guò) API 正常使用谷歌地圖的網(wǎng)站基本沒(méi)有任何限制;
2 、說(shuō) “ 基本 ” 沒(méi)有限制的原因是,谷歌對(duì)每個(gè) API 密鑰對(duì)應(yīng)的網(wǎng)站所作的 請(qǐng)求次數(shù)有限制,每天( 24 小時(shí))的請(qǐng)求次數(shù)不能超過(guò) 15000 次;
3 、不能使用谷歌地圖從事任何非法的行為,否則谷歌應(yīng)該能夠通過(guò)這個(gè)密鑰阻止你的網(wǎng)站使用谷歌地圖;
更簡(jiǎn)單的說(shuō),谷歌使用這個(gè)密鑰保證能夠?qū)λ?API 用戶(hù) / 網(wǎng)站進(jìn)行區(qū)分,方便必要的時(shí)候?qū)?“超常規(guī) ” 用戶(hù)進(jìn)行阻攔。
對(duì)于地址解析的次數(shù)限制,一般來(lái)說(shuō)不會(huì)有什么影響,這里主要說(shuō) API 密鑰,所以以后有時(shí)間可以再詳細(xì)說(shuō)說(shuō)地址解析相關(guān)的東東。
,對(duì)于 API 密鑰,還有幾點(diǎn)需要記下來(lái):
1 、如果使用 API 的頁(yè)面還沒(méi)有發(fā)布,只是在本地調(diào)試,可以不用密鑰,隨便用個(gè)字符串代替就可以了;
2 、 API 密鑰只對(duì)網(wǎng)站目錄或者域有效,所以,雖然你是使用同一個(gè)谷歌帳號(hào)登錄后注冊(cè)的密鑰,但是,對(duì)不同域的網(wǎng)頁(yè),需要用這些域分別注冊(cè)不同的密鑰,對(duì)于同一個(gè)域里的頁(yè)面,直接拿你網(wǎng)站的域名注冊(cè)一個(gè),在這個(gè)域里的所有頁(yè)面就可以通用這個(gè)密鑰了。
還有一個(gè)關(guān)于 API 密鑰的實(shí)際問(wèn)題:
在論壇里還有人問(wèn)過(guò),同一個(gè)頁(yè)面需要支持不同的域名,最簡(jiǎn)單的就是公司有一個(gè) cn 域名,也有一個(gè) com 域名,這怎么辦?
其實(shí),對(duì)于這種問(wèn)題,可以提前先注冊(cè)好不同域名對(duì)應(yīng)的密鑰,存在你的JS 變量里面,頁(yè)面加載時(shí)通過(guò)window.location 得到當(dāng)前請(qǐng)求頁(yè)面的域名,通過(guò)這個(gè)域名在找到對(duì)應(yīng)的密鑰,然后使用script 動(dòng)態(tài)加載的方法加載地圖API ,用代碼描述就是:
// 事先已經(jīng)注冊(cè)好的密鑰
var keyMapping = {host1:key1, host2:key2};
// 實(shí)際請(qǐng)求頁(yè)面的域名
var requestHost = window.location.hostname;
// 找到需要的密鑰
var key = keyMapping[requestHost];
// 構(gòu)造加載API 的script url
var apiUrl = "http://ditu.google.com/maps?file=api&v=2&key=" key; // 使用script 動(dòng)態(tài)加載的方法加載地圖API
var scriptTag = document.createElement('script');
scriptTag.setAttribute('type', 'text/javascript');
scriptTag.setAttribute('src', apiUrl);
document.getElementsByTagName('head')[0].appendChild(scriptTag);
使用這段代碼時(shí),需要注意把你自己的JS 代碼中對(duì)API 的各個(gè)類(lèi)的調(diào)用放在API 加載完成以后,詳細(xì)的解釋可以先google 一下的問(wèn)題,三言?xún)烧Z(yǔ)還是說(shuō)不清楚的,呵呵。 這段代碼我沒(méi)有實(shí)際跑過(guò),歡迎斧正,如果你有更好的方法,我更愿意洗耳恭聽(tīng)了。
使用谷歌地圖API 應(yīng)該有所了解的一些技術(shù)外背景 這些內(nèi)容,常用谷歌地圖的應(yīng)該也都知道,我也只寫(xiě)我知道的,了解這些對(duì)使用 API 還是有幫助的。
1 、 谷歌地圖主頁(yè)
谷歌地圖對(duì)應(yīng)不同的地區(qū)都會(huì)有一些專(zhuān)門(mén)的主頁(yè),首次登陸時(shí)會(huì)顯示這些地區(qū),比如,香港的: ,臺(tái)灣的: aps.google.com.tw ,日本的: 不過(guò),我們常用的也就三個(gè):
,這個(gè)應(yīng)該是谷歌地圖的全球主頁(yè),默認(rèn)顯示老美地圖,拖拽到不同地區(qū)會(huì)對(duì)應(yīng)顯示不同語(yǔ)言版本的地圖,不過(guò)目前對(duì)中文數(shù)據(jù)搜索支持的不如下面正式的中文主頁(yè); 這個(gè)么,我叫它是谷歌地圖的中文主頁(yè),什么意思看下一個(gè)你就知道了,用這個(gè)可以使用 “ 我的地圖 ” ;
這個(gè),我叫他是谷歌地圖的大陸主頁(yè),目前還沒(méi)有 “ 我的地圖 ” 這個(gè)功能;
后面這兩個(gè)主頁(yè)只能顯示大陸地區(qū)的詳細(xì)地圖,如果想看別的地區(qū)的,就只能用全球主頁(yè)了。 當(dāng)然,別以為你抓著漏洞可以注冊(cè)個(gè) maps.google.cn ,然后賣(mài)給谷歌,不信你試試 maps.google.cn ,看它跳到哪里了 :)
2 、谷歌地圖的類(lèi)型
其實(shí),谷歌地圖的類(lèi)型主要也就三種:
普通地圖:歷史悠久的人工繪制地圖,不多說(shuō)了,不知道的給我留個(gè)地址,我快遞個(gè)板磚給你; 衛(wèi)星地圖:用衛(wèi)星圖片拼成的地圖,不同地圖的顯示精度有區(qū)別,現(xiàn)在中文主頁(yè)上也有了,曾經(jīng)可是被禁止的,怕你偷看海南的黑魚(yú);
地形地圖:用等高線(xiàn)標(biāo)出海拔的地圖,對(duì)地理教學(xué)和教育相關(guān)的相當(dāng)有用,當(dāng)然,對(duì)軍迷也超級(jí)有吸引力,不展開(kāi) !
把這三種組合起來(lái) ( 主要是普通地圖和衛(wèi)星地圖的組合 ) ,或者在這些地圖上添加其他的數(shù)據(jù),就又有一些新的類(lèi)型了,這個(gè)層出不窮,我只說(shuō)主頁(yè)上現(xiàn)有的:
混合地圖:就是把普通地圖和衛(wèi)星地圖結(jié)合,在衛(wèi)星地圖上顯示行政區(qū)、街道等等,在全球主頁(yè)上把鼠標(biāo)移到 “ 衛(wèi)星 ” 按鈕上,會(huì)跳出來(lái)一個(gè) “ 顯示標(biāo)簽 ” 的復(fù)選框,選中后地圖就是這個(gè)類(lèi)型了,中文還沒(méi)支持,不知道什么時(shí)候可以用;
交通地圖:在地圖上顯示交通信息。這個(gè)理論上是實(shí)時(shí)的,不過(guò),在目前的中文地圖上,吸引眼球的作用更大一些,如果能在手機(jī)版上使用就好了(貌似目前還沒(méi)有),而且只有北京和上海有數(shù)據(jù)支持;
街景地圖:這個(gè)和交通地圖一樣,嚴(yán)格上不算是一種地圖類(lèi)型,就是使用 Flash 來(lái)顯示街道的全景圖,我也在等中文地圖支持街景了(中文 API 已經(jīng)支持 StreetView 相關(guān)的類(lèi)了,就是沒(méi)有數(shù)據(jù)),不久前看到的消息是目前谷歌對(duì)這個(gè)沒(méi)有時(shí)間表,呵呵,他是 “ 萬(wàn)事俱備,只欠東風(fēng) ” ,努力吧!
在地圖 API 中,后面組合的這三種除了混合地圖算作是一種地圖類(lèi)型外,其他兩個(gè)都不算是地圖類(lèi)型,被看著是在地圖上新增的層(術(shù)語(yǔ):疊加層 /overlay )。
3 、谷歌地圖的數(shù)據(jù)源
谷歌是一個(gè)服務(wù)提供商,而不是一個(gè)內(nèi)容提供商,所以,準(zhǔn)確的說(shuō),谷歌地圖向終端用戶(hù)提供的是基于地圖的搜索服務(wù)。從這一點(diǎn)上,可以把谷歌地圖上的數(shù)據(jù)分為三類(lèi):
地理數(shù)據(jù):地理、空間信息,包括經(jīng)緯坐標(biāo)、航拍 / 衛(wèi)星圖片、行政區(qū)劃以及據(jù)此繪制的圖片等等,由谷歌或其合作伙伴持有;
商業(yè)數(shù)據(jù):與地理相關(guān)的商業(yè)數(shù)據(jù),比如餐館、影院、交通、景點(diǎn)等等,這也是由谷歌或其合作伙伴持有,谷歌可能對(duì)這些數(shù)據(jù)有一個(gè)采集、過(guò)濾、整理的再加工過(guò)程。想被客戶(hù)搜索到,就來(lái)這里 吧;
用戶(hù)數(shù)據(jù):用戶(hù)使用谷歌地圖 API 定制地圖并在地圖上標(biāo)注的數(shù)據(jù),這些數(shù)據(jù)由用戶(hù)持有。 這樣,通過(guò)這個(gè)分類(lèi),我們可以解決兩個(gè)非常常見(jiàn)的疑問(wèn):
1 )使用谷歌地圖 API ,地圖上的數(shù)據(jù)存在哪里?
,你是你的我是我的。是谷歌提供的數(shù)據(jù),由谷歌負(fù)責(zé);如果是你自己提供的數(shù)據(jù),當(dāng)然由你負(fù)責(zé)保存,谷歌相當(dāng)于給你一個(gè)展示數(shù)據(jù)的平臺(tái),除非你愿意把自己的數(shù)據(jù)無(wú)償貢獻(xiàn)給谷歌 :) 2 )使用谷歌地圖 API ,終端用戶(hù)會(huì)通過(guò)谷歌搜索到我的數(shù)據(jù)嗎?
對(duì)谷歌地圖來(lái)說(shuō),他的數(shù)據(jù)源只有地理數(shù)據(jù)和商業(yè)數(shù)據(jù),所以在谷歌地圖主頁(yè)上不會(huì)搜到你的數(shù)據(jù)。但是,你可以在你的地圖上定制谷歌搜索的數(shù)據(jù)源,使得用戶(hù)可以搜索你的數(shù)據(jù)。(不是很肯定的哦,要看你的具體情況的)
4 、 谷歌地圖 API
谷歌地圖 API 就是一系列使用 OO 方式組織的 JavaScript 類(lèi)和靜態(tài)方法(我有時(shí)候也統(tǒng)稱(chēng)為地圖 API 類(lèi)庫(kù)),通過(guò)創(chuàng)建這些類(lèi)的實(shí)例(對(duì)象)或調(diào)用 API 中提供的靜態(tài)方法,可以在頁(yè)面上創(chuàng)建和控制地圖,也可以在地圖上展示任何非谷歌提供的數(shù)據(jù) / 信息。谷歌地圖 API 只涉及瀏覽器 / 客戶(hù)端相關(guān)的技術(shù),比如 JavaScript 、 HTML DOM 、 CSS 等,不涉及任何服務(wù)器端的技術(shù),或者說(shuō),你可以基于任意你需要的服務(wù)端使用谷歌地圖 API (所以,這里面能夠展開(kāi)的東東就太多了,以后再總結(jié)吧,我也在學(xué)習(xí))。
加載谷歌地圖API 的URL 詳細(xì)解讀 谷歌地圖的 API 類(lèi)庫(kù)是通過(guò) script 標(biāo)簽導(dǎo)入的,形式如下:
我們使用API 的時(shí)候關(guān)心的就是這個(gè)script 的src 屬性了,這個(gè)屬性也就兩個(gè)部分:路徑: ; 參數(shù):file=api&hl=zh-CN&v=2&key=abcdefg 。 解剖一下:
1 、 路徑: 路徑在這里需要注意的就是它的域名: ditu.google.com 。
這個(gè)和 里介紹的谷歌地圖主頁(yè)的問(wèn)題類(lèi)似,就是說(shuō),我們主要可以使用 maps.google.com 、 ditu.google.com 、 ditu.google.cn 這三個(gè)域名,有些區(qū)別和說(shuō)明:
1 ) 如果你需要在地圖上顯示大陸以外的詳細(xì)地圖,就非 maps.google.com 莫屬了,不過(guò),這個(gè)域名對(duì)國(guó)內(nèi)地理數(shù)據(jù)的查詢(xún) ( 比如查詢(xún)地址、路線(xiàn)等等 ) 支持能力有限,如果你這方面有需求就要小心了,而且,這個(gè)應(yīng)該是使用的國(guó)外的服務(wù)器,所以,訪問(wèn)速度也需要注意;
2 )相反,如果你需要使用谷歌提供的與國(guó)內(nèi)地理數(shù)據(jù)查詢(xún)相關(guān)的 API ,就是用 ditu.google.com 吧,使用這個(gè)域名的缺點(diǎn)就在于它和 maps.google.com 提供的類(lèi)庫(kù)不是完全一致,更新稍微有點(diǎn)滯后,而且,受限于國(guó)內(nèi)數(shù)據(jù)源在法律等方面的限制,有些功能方面的支持也會(huì)受限,比如地址解析(現(xiàn)在已經(jīng)放開(kāi)了,這里只是拿來(lái)舉例);
,3 )至于 ditu.google.com 和 ditu.google.cn 的區(qū)別,我也很糊涂,如果你很想做個(gè)聽(tīng)話(huà)的好公民,不出一絲差錯(cuò),那么 .cn 可能會(huì)比 .com 更讓你放心一點(diǎn)吧,臆測(cè),呵呵。
總得來(lái)說(shuō),一般的應(yīng)用使用 ditu.google.com 就可以了,如果需要使用大陸以外的詳細(xì)地圖,就考慮使用 maps.google.com 吧。不過(guò),因?yàn)槭褂昧讼嗤拿臻g,這兩者在一個(gè)頁(yè)面中不能共存,所以,可以考慮用兩個(gè) iframe 來(lái)動(dòng)態(tài)切換,這里有個(gè)的例子,就是這么實(shí)現(xiàn)的,咱當(dāng)初也貢獻(xiàn)過(guò)一把。
2 、 參數(shù):file=api&hl=zh-CN&v=2&key=abcdefg
1 ) file=api
這個(gè)是請(qǐng)求API 的JS 文件用的,少不了,不需多說(shuō);
2 ) hl=zh-CN
這個(gè)是在設(shè)定地圖上除了地圖圖片以外的諸如控件名稱(chēng)、版權(quán)聲明、使用提示等所需要顯示文本的語(yǔ)言版本時(shí)候用的,如果沒(méi)有指定這個(gè)參數(shù)就使用 API 的默認(rèn)值,對(duì) ditu.google.com 來(lái)說(shuō),默認(rèn)是中文簡(jiǎn)體, maps.google.com 默認(rèn)的是英文。其他的語(yǔ)言版本在這里有一個(gè) (好像好久沒(méi)更新了)。
3 ) v=2
這個(gè)是用來(lái)指定需要導(dǎo)入的 API 類(lèi)庫(kù)的版本號(hào),可以有四種設(shè)定方式:
v=2.s 穩(wěn)定版本,更新最慢,但是最可靠;
v=2 當(dāng)前版本(只用主版本號(hào)),更新速度和可靠性介于 s 和 x 之間;
v=2.x 最新版本,更新最快,包括最新功能,可能沒(méi)有當(dāng)前版本可靠;
v=2.76 指定版本。不建議使用。
目前谷歌地圖 API 的主版本號(hào)是 2 ,這是從 2006 年 4 月開(kāi)放的版本,對(duì)之前的第 1 版做了一些比較重要的升級(jí),不過(guò)估計(jì)國(guó)內(nèi)用第 1 版的應(yīng)該很少,所以也沒(méi)必要多說(shuō)了,注意第二版里定義地圖對(duì)象時(shí)使用 GMap2 而不是 GMap 就可以了,否則可能會(huì)導(dǎo)致一些奇怪的問(wèn)題,我是見(jiàn)過(guò)這樣的。
多羅嗦兩句,谷歌地圖 API 正常情況下還是相當(dāng)穩(wěn)定的,不過(guò)也有一些比較著名的 Bug ,比如超長(zhǎng)的 Polyline 在某些特定環(huán)境下可能會(huì)顯示不正常。萬(wàn)一有什么問(wèn)題可以去這里 Bug (英文版),當(dāng)然,更簡(jiǎn)單的辦法是到谷歌地圖 API 論壇里問(wèn)問(wèn),不過(guò)別忘了把你的問(wèn)題、運(yùn)行環(huán)境描述清楚。我碰到過(guò)很多次這樣的情況:對(duì) JavaScript 或者瀏覽器端的某些技術(shù)特性不是很了解,出了一些奇怪的問(wèn)題,撂一句話(huà)就走人,唉,就不評(píng)論了, “ 活到老學(xué)到老 ” 還是很有道理的。
4 ) key=abcdefg
這個(gè)是設(shè)定你注冊(cè)的 API 密鑰,我 ,不是很了解的話(huà)可以看看。使用JavaScript 創(chuàng)建地圖步驟詳解
,一段經(jīng)過(guò)精簡(jiǎn)的代碼:
新建一個(gè)空白的文本文件,把上面這段代碼copy 過(guò)去,不要改變代碼的任何順序,然后把這個(gè)文本文件保存為html 文件,使用瀏覽器打開(kāi)(不要使用MS 的IE ),看看你能看到什么!對(duì)這段代碼的詳細(xì)解釋
上面的這段代碼就是創(chuàng)建一個(gè)地圖的核心步驟:
1 、導(dǎo)入地圖 API 類(lèi)庫(kù)。
注意這里的參數(shù)key ,我在以前的文章里已經(jīng)詳細(xì)解釋過(guò)了,如果你只是在本地運(yùn)行,暫時(shí)可以不用管它。
2 、在頁(yè)面的 body 元素中定義一個(gè)地圖容器。
這個(gè)地圖容器一般使用div 元素來(lái)定義,如果你愿意,使用p 元素或者其他你能想到的元素都可以,但是都應(yīng)該是塊元素,并且必須定義它的id ,保證在后面的步驟里能夠通過(guò)
document.getElementById 找到這個(gè)元素。
容器的 style 屬性在這里是用來(lái)定義這個(gè)容器的大小,從而決定所顯示地圖的大小,當(dāng)然,如果你在這里不定義也可以通過(guò)其他的手段來(lái)達(dá)到目的,這里暫且先認(rèn)為這個(gè) style 的定義和 id 屬性一樣也是必不可少的吧。
其實(shí) body 元素在這里也有一些特殊的作用,就是保證下一步驟在頁(yè)面的 html 元素全部加載結(jié)束后再執(zhí)行,詳細(xì)的理論就不細(xì)說(shuō)了。
3 、定義你自己的 script 區(qū)域,在里面 new 一個(gè) GMap2 對(duì)象,并且指定其顯示所需的兩個(gè)基本要素:中心、縮放層次。
這里的GMap2 是谷歌地圖API 中最重要的核心類(lèi),對(duì)應(yīng)在頁(yè)面上顯示的地圖,所有對(duì)地圖的操作都需要在已經(jīng)創(chuàng)建(new )了GMap2 對(duì)象的基礎(chǔ)上才能夠進(jìn)行。在調(diào)用GMap2 構(gòu)造函數(shù)是使用的參數(shù)就是在上一步定義的地圖容器,DOM 對(duì)象,使用document.getElementById 獲取。 要在頁(yè)面上正常顯示地圖,僅僅調(diào)用 GMap2 類(lèi)的構(gòu)造函數(shù)創(chuàng)建一個(gè) GMap2 對(duì)象還不夠,你還需要指定這個(gè) GMap2 對(duì)象的中心,通常也順便指定它的縮放層次,否則就會(huì)默認(rèn)顯示縮放層次
,為 0 。
要指定新創(chuàng)建地圖的中心,需要使用地圖 API 里面定義的另一個(gè)常用類(lèi) GLatLng ,可以把這個(gè)類(lèi)簡(jiǎn)單的認(rèn)為是對(duì)地理坐標(biāo)的封裝類(lèi),構(gòu)造函數(shù)中第一個(gè)參數(shù)是南北向的緯度,第二個(gè)參數(shù)是東西向的經(jīng)度。
調(diào)用 GMap2 的 setCenter 方法設(shè)定完地圖的中心和縮放層次,這個(gè)地圖就可以正常顯示了。
還需要關(guān)心的幾個(gè)問(wèn)題:
上面的示例代碼僅僅是為了顯示一個(gè)試驗(yàn)性質(zhì)的簡(jiǎn)單地圖,所以把很多暫時(shí)不是很必要的代碼都去掉了,如果你需要?jiǎng)?chuàng)建具有很好的兼容性、并且能夠發(fā)布到你自己的網(wǎng)站上的地圖,還需要注意這幾個(gè)問(wèn)題:
1 、為了保證有足夠的兼容性,谷歌建議使用 XHTML 來(lái)定義顯示地圖的 html 頁(yè)面,所以,你需要在這個(gè)頁(yè)面的頂部聲明 XHTML 的 DOCTYPE ,并且在 html 中聲明 XHTML 的命名空間
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
當(dāng)然,最好你自己的頁(yè)面代碼也能夠符合 XHTML 的語(yǔ)法規(guī)則。相對(duì)我們現(xiàn)在的 HTML4.01 來(lái)說(shuō),可以把 XHTML 語(yǔ)法規(guī)則簡(jiǎn)單的歸納如下:
html 、 head 、 title 、 body 元素一個(gè)都不能少,并且只能有 html 一個(gè) root 元素; 不要使用簡(jiǎn)化的屬性,必須使用 “name='value'” 的形式;
標(biāo)簽名和屬性名都用小寫(xiě)字母,屬性值要用引號(hào)括起來(lái);
標(biāo)簽必須是閉合的,并且不能交叉嵌套;
使用 id 屬性而不是 name 屬性來(lái)獲取元素;
2 、為了兼容 “ 偉大的 ”IE 瀏覽器,以便能夠在 IE 中也正確顯示地圖中的折線(xiàn),需要在 html 標(biāo)簽中增加對(duì) VML 命名空間的聲明
這個(gè)很容易忽略,導(dǎo)致你在 IE 里的折線(xiàn)不能正常顯示,所以把這一點(diǎn)單列出來(lái)加以強(qiáng)調(diào)。 3 、對(duì)于通用的瀏覽器兼容性檢查,地圖 API 提供了一個(gè)全局方法 GBrowserIsCompatible()來(lái)保證地圖 API 是在它所兼容的瀏覽器里運(yùn)行的,這個(gè)兼容瀏覽器列表我也沒(méi)找到最新的,谷歌文檔里給出了一個(gè)遠(yuǎn)古時(shí)代的列表,所以不列也罷,對(duì)我們目前通用的 FireFox 、 IE 、 Safari 、 Opera 瀏覽器里運(yùn)行地圖 API 都沒(méi)有問(wèn)題。
這里只說(shuō)一下GBrowserIsCompatible() 這個(gè)方法的使用:
從名字也可以看出,GBrowserIsCompatible() 方法返回一個(gè)boolean 類(lèi)型的值,所以,把我們對(duì)地圖操作的起點(diǎn)放在對(duì)這個(gè)方法返回值的判斷塊中,形如:
if(GBrowserIsCompatible()){
// 開(kāi)始創(chuàng)建和操作地圖
} else {
// 如果有必要,就在這里定義你對(duì)這個(gè)異常的處理
}
,當(dāng)然,在你自己的代碼中,針對(duì)不同的瀏覽器環(huán)境你還是需要自己實(shí)現(xiàn)兼容性的代碼,這里的GBrowserIsCompatible() 只是保證地圖API 類(lèi)庫(kù)是在它兼容的環(huán)境中運(yùn)行的。
4 、注冊(cè)你要發(fā)布頁(yè)面所在網(wǎng)站的谷歌地圖 API 密鑰,替換掉示例代碼里的 key ,我 ,不多說(shuō)了。
5 、為了保證你的頁(yè)面在任何可用的網(wǎng)絡(luò)環(huán)境下都能快速加載并且正確顯示,建議定義 body 元素的 onload 方法,在 onload 方法中開(kāi)始你的 JS 動(dòng)作。同時(shí),把讀入地圖 API 的 script 標(biāo)簽放在 head 元素中,而把你自己的 JavaScript 代碼塊放到 body 標(biāo)簽的后面去定義。如果對(duì)瀏覽器的加載順序比較熟悉的話(huà),你就不必遵守我說(shuō)的規(guī)則了,自由定義你認(rèn)為應(yīng)該的 JavaScript 聲明順序。 6 、為了避免 JavaScript 中引用頁(yè)面的 DOM 元素可能存在的內(nèi)存泄漏 ( 尤其是在 “ 偉大的 ”IE 瀏覽器中 ) ,你需要使用地圖 API 中定義的 GUnload() 方法作為你的 body 元素的 onunload 方法,并且最好把這個(gè)作為一個(gè)必須的規(guī)則記住。但是 GUnload() 方法不是避免內(nèi)存泄漏的大力丸,所以,你在自己的代碼中還是需要注意避免內(nèi)存泄漏這個(gè)問(wèn)題。
7 、為了能夠在頁(yè)面上正常顯示中文,需要把頁(yè)面的字符集定義為 utf-8 。
所以,一個(gè)完整的應(yīng)用谷歌地圖API 的頁(yè)面代碼如下:
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
怎樣在你的網(wǎng)頁(yè)里嵌入地圖