Google Map開發系列(五)——怎樣在你的網頁里嵌入地圖
當前位置:點晴教程→知識管理交流
→『 技術文檔交流 』
[p]要在自己的網頁中嵌入地圖,常用的方法可以歸納為以下幾種:[br][b]1、最簡單的方法 ——使用谷歌地圖主頁的"鏈接"[/b][br] 如果你只需要在自己的頁面上顯示某個特定范圍的地圖,比如你的公司所在地,但是不需要在地圖上添加任何額外的內容,比如標記、折線等等,那么,使用這個方法來嵌入谷歌地圖是最簡單的。[br] 登錄[url=http://ditu.google.cn/]谷歌地圖主頁[/url],定位你需要顯示的范圍后,點擊地圖左上角的“鏈接”,會出現一個信息框,給出兩個輸入框,把第二個輸入框中的內容拷貝到你的頁面上就可以了。[br] 其實,這段嵌入代碼就是一個iframe的聲明,所以,雖然地圖主頁提供一個自定義地圖并預覽的功能,但是只能自定義地圖的大小,如果需要的話,我們完全可以通過手動修改這個iframe聲明來實現更多的自定義,比如,給這段iframe加上自定義的樣式。[br][b]2、最精簡的方法 ——使用谷歌靜態地圖[/b][br] 如果你需要顯示某個特定范圍的地圖,而且需要在地圖上加上一些標記、折線。但是,你并不在乎你網頁上的地圖能否拖拽,那么,這個靜態地圖應該就是你需要的了。[br] 所謂靜態地圖,意思就是你在頁面上嵌入的其實只是一個gif圖片,這個gif圖片是你通過url從谷歌動態獲取的,這樣的嵌入地圖就有別于我們常用的“動態”地圖了,而且,加載這樣的地圖,比加載一個完整的地圖要快捷的多。[br] 要在你的頁面上使用這樣的靜態地圖,只需要使用一個img標簽,把這個標簽的src屬性指定為谷歌靜態地圖的url就可以了。[br] 看一個簡單的靜態地圖url:http://ditu.google.cn/staticmap?center=39.915175,116.389332&zoom=14&size=500x300&key=your_key_here[br] 在這個url中,你可以編輯center、zoom、size這些參數來指定地圖的中心點、縮放級別、地圖大小等等,當然,如果需要在地圖上添加標記、折線,你還可以加上對應的參數。不過,不用擔心你要記住這么多參數,這里有一個[url=http://chinamaps.googlecode.com/svn/4blogs/static-map-wizard.html]定制靜態地圖的向導[/url],簡單的幾步就可以得到你需要的url了。如果有興趣,可以去研究一下[url=http://code.google.com/intl/zh-cn/apis/maps/documentation/staticmaps/]谷歌靜態地圖的api文檔[/url]。[br] 嚴格來說,谷歌靜態地圖也是谷歌地圖api的一種,所以,使用靜態地圖是需要你的谷歌地圖api密鑰的,如果你之前定義過地圖api的密鑰,直接copy過來就可以了,不需要再去注冊。如果你不知道密鑰是怎么回事,那就看看[url=http://hi.baidu.com/clive_studio/blog/item/cf13afb26555d4aed9335ada.html]我之前對密鑰的解讀[/url]吧。[br][b]3、最自由的方法 --使用谷歌地圖api[/b][br] 如果上面兩種方式都不能滿足你的需求,那么,就來試試[url=http://code.google.com/intl/zh-cn/apis/maps/]谷歌地圖api[/url]吧。雖然谷歌地圖api已經細分為javascript、flash、earth、static等等多個版本,但是,在我看來,javascript api是谷歌地圖api的根本,所以,在我的博客里,除非特別指明,說到谷歌地圖api都是指谷歌地圖javascript api。使用這個api,你可以用你愿意的任何可行的表現形式在地圖上展現你的數據,甚至可以把你自己的地圖做的比谷歌地圖還漂亮。[br] 要使用這個api在頁面中嵌入地圖,簡單的步驟就是:[br] 1)使用javascript標簽導入地圖api類庫;[br] 2)在頁面上定義一個裝載地圖的元素,通常使用一個div標簽,指定width和height;[br] 3)在你的javascript代碼中new gmap2(document.getelementbyid("your map container's id"));[br] 4)使用gmarker、gpolyline等api中提供的類定制你要在地圖上添加的標記、折線等等。[br] 詳細的創建谷歌地圖過程可以看看我的“[url=http://logfei.blogspot.com/2008/11/api_7619.html]使用javascript創建地圖步驟詳解[/url]”。但是,要想自如的使用這個api,你需要具備一定的javascript知識和動手能力,此外,強烈建議你先讀讀[url=http://code.google.com/intl/zh-cn/apis/maps/documentation/index.html]谷歌地圖javascript api的開發指南[/url],能夠解決你的一些常見疑問,當然了,你也可以在我的博客里找找你想了解的知識。[/p]
[p] 除了上面說的這幾種方法,其實還有一些比較少用的方法也可以在網頁中嵌入地圖,比如[url=http://code.google.com/intl/zh-cn/apis/gadgets/]使用google gadget api[/url],我在博客右邊欄嵌入的地圖使用的就是gadget api。[/p] [p] 如果你不需要在自己的頁面中嵌入地圖,或者,你沒有自己的網站,那么,使用mapplet api也是一個不錯的創建你自己的地圖的方式。這是一個可以在谷歌地圖主頁上“我的地圖”中運行的小程序,它的api其實就是谷歌地圖api的一個子集,因為要在谷歌地圖主頁中嵌入,所以與谷歌地圖api稍稍有一些不同。詳細情況可以參考一下[url=http://code.google.com/intl/zh-cn/apis/maps/documentation/mapplets/]mapplet api的開發文檔[/url] 。[/p] 該文章在 2010/7/3 18:46:35 編輯過 |
關鍵字查詢
相關文章
正在查詢... |