搜尋

隨機推薦

30 十一月 2009
02 十二月 2009

如何使用Google Maps API

所以,你的客戶發電子郵件給你,並問:「你把其中的一個華麗的地圖在我的聯繫頁面,這樣用戶可以看到我們的建設,從衛星的看法?」。您使用過谷歌地圖多次,但只有一個問題:你不知道如何使用API。那麼讓你的勺子挖的!

PG 作者: 傑弗里路

你好,我是傑夫。我是主編Nettuts +,和站點管理的主題森林。我花太多時間在前面的電腦,找到我告訴我的未婚夫',「我們將在5分鐘!」過於頻繁。我不能出去吃晚飯時我仍然在生產Firebug的錯誤...讓我發瘋。當我空閒時,我斷斷續續地寫文章我自己 個人博客。 如果它會讓你的歡心,教會, 我們走 Twitter的。

廣告

*點擊全屏切換。

第1步:獲取一個獨特的API密鑰

如果你下載的源代碼提供了這篇文章,你會發現它不工作,在您的網站。這是因為谷歌要求所有用戶獲得獨特的「空氣污染指數的關鍵」每個網站實現谷歌地圖。

別害怕。它是100%自由,時間大約是30秒鐘註冊。首先, 訪問谷歌的註冊頁面 並輸入您的網站的網址。不要擔心,加入特定的路徑。根URL將覆蓋每個頁面是該領域的一部分。同意的條款和條件,然後點擊「生成的API」。

Generate Key

就是這樣!你的頁面已經被重定向到包含您的唯一鍵,以及一個示例頁-作為速成班。您的鑰匙看起來像:
ABQIAAAAAq93o5nn5Q3TYaaSmVsHhR1DJfR2IAi0TSZmrrsgSOYoGgsxBSG2a3MNFcUDaRPk6tAEpdWI5Odv

您還會發現一個腳本路徑將類似於:

  

你會跟我的不同,因為它包含您自己的特定鍵值。複製此並將其粘貼到你的頭部分文件。

Sign Up Complete

您可能想要 書籤 鏈接到API文檔。您將無疑會引用它作為你的技能的進展。

第2步:設置您的HTML

<div id="myMap" style="width: 600px; height: 400px;"></div>  

為了簡單起見,我們將創建一個光禿禿的骨頭佈局。添加以下元素在體內您的文檔。

在實際情況下,您應該把造型到一個外部文件(比如我在視頻)。高度和寬度值將被使用的API來確定您的尺寸圖。不要擔心,什麼事情也幹剪掉。

步驟3:JavaScript的

接下來,添加以下到您的JavaScript文件。檢討一下,然後繼續。

$(function() { // when the document is ready to be manipulated.  
if (GBrowserIsCompatible()) { // if the browser is compatible with Google Map's
var map = document.getElementById("myMap"); // Get div element
var m = new GMap2(map); // new instance of the GMap2 class and pass in our div location.
m.setCenter(new GLatLng(36.158887, -86.782056), 13); // pass in latitude, longitude, and zoom level.
}
else {alert("Your browser is not worthy.");}
});

藉此行代碼的行:

  • 當文檔準備進行操作,運行代碼within.This是一個jQuery語法,但jQuery是不是需要最少。你還可以簡單地添加一個「的onLoad()」屬性,以你的身體元素-儘管這是混亂的。
  • 如果瀏覽器的用戶正在訪問的映射不兼容的API,然後顯示一個警告(見底部)。否則,運行中的代碼。
  • 創建一個名為「地圖」,並告訴它找到的div將包含地圖。
  • 接下來,創建一個名為「米」,使之等於一個新實例的「GMap2」級。括號內,通過在「地圖」的變量,你剛剛創建的前面
  • 最後,設置一個中心點,使該地圖知道該怎麼表演。要做到這一點,我們創建了一個新實例的「GLatLng」級,並通過在經度和緯度值。你可以去 這裡 來獲取相應的值。對我來說,我已經設置坐標,我的家鄉。之後,您可以選擇輸入縮放級別-我已經設定標準'13'。

此代碼僅會提供一個基本的地圖,可能是完全適合您的需要。但是,如果您想也是實施「放大」和「地圖模式」功能,請繼續閱讀。

第4步:改進我們的地圖

有幾十個功能,您可以添加到您的地圖。我們就去了他們的一小部分。首先,我們將實現一個變焦桿,將允許用戶逐步放大或縮小。

Layout

m.addControl(new GLargeMapControl()) 

這裡,我們以我們的地圖,並增加新的控制稱為「GLargeMapControl」。

接下來,讓我們添加一項功能,可讓用戶選擇他們想要映射模式-正常,衛星視圖,或混合。

var c = new GMapTypeControl(); // switch map modes  
m.addControl(c);

  • 創建一個名為「C」和使之等於一個新實例的「GMapTypeControl」級。
  • 添加一個新的控制,並通過的「c」。

如果您刷新瀏覽器,您會看到該用戶群機系統可以選擇,他選擇觀看模式。但是如果你要設置默認模式?在這種情況下,可以使用「setMapType」。

m.setMapType(G_SATELLITE_MAP);

當定義的默認模式,您有三個選擇。

  • G_SATELLITE_MAP
  • G_NORMAL_MAP
  • G_HYBRID_MAP

您完成!

這不是太難,是嗎?有幾個具體的類名,您需要記住,或記下供以後參考。但除此之外,它的驚人的簡單實現這樣一個先進的映射到您的網站。

對你的模板設計,為什麼不執行這一把其中一個主題,您出售 ThemeForest?

前幾天,我們公佈的教程,告訴您如何結合許多API -包括谷歌地圖。但是,許多你不知道足夠的開始。希望這會有所幫助。當你纏你的頭解決此API的,為什麼不自己節省頭痛,爭取幫助一個PHP類名為 Phoogle?我認為這是最好的學習正確的方式第一次,但現在你有...削減某些角落!下週再見。

附加資源

  • Create A Mashup By Combine 3 APIs

    如何創建混搭結合3種不同的API

    本教程將告訴您如何創建一個mashup的三個不同的接口,包括集成與谷歌地圖。

    訪問

廣告

无觅相关文章插件,快速提升流量

Please publish modules in offcanvas position.