| 相信專業，給你品質 專營建築物防水、抓漏、除壁癌、拆除工程 |  | 直接提供客戶給您，每天提供給您新客戶帶來新商機 不用再花高額的廣告費做些沒效果的廣告 |
| 相信專業，給你品質 專營建築物防水、抓漏、除壁癌、拆除工程 | | 直接提供客戶給您，每天提供給您新客戶帶來新商機 不用再花高額的廣告費做些沒效果的廣告 |
map api 詳細教學說明 |
| 房東：阿雅  發表時間：2010-09-05 | [檢舉] |
|
在使用 Google Maps API 之前，你必須向 Google 申請到一組 Key，申請的方法很簡單： 首先，先決定你的網頁會出現在哪個 URL，例如我想把 Google Maps 嵌入到我的 blog 中，我可以先知道該網頁的 URL 應該會是 http://blog.roodo.com/syshen/archives/XXXX.html，前面包含到最後一個目錄的字串便是要來申請 Key 的基準，也就是 http://blog.roodo.com/syshen/archives/。 以你的帳號登入 Google，如果你還沒有帳號，請到 https://www.google.com/accounts/ 申請。 連到 Google Maps API Sign Up 網頁將 (1) 所決定的 URL 填入，並按 \"Generate API Key\" 取得 Key。 最後會出現三個方塊，分別是你取得的 Key，你指定的 URL，以及一個範例。建議是將範例中的 整行 Copy/Paste 下來。 Goole Maps API 使用上有些法律上的限制要注意： 你的 Google Maps 服務必須免費開放給一般使用者。 如果你預估你的地圖服務會有超過每天 50,000 筆頁面的存取量，請主動聯絡 Google。 Google 會不定期更新 API，你有責任跟著更新你的網頁中的 API。 你不能更改或隱藏 Google 的 logo。 Google 有權力以後在地圖上放廣告，而你不能更改或破壞這些廣告。 有些地圖應用是 Google 不希望看到的，例如指明哪些地方可以購買到毒品或是任何違法行為。 這些限制我想一般簡單的應用都不太會觸及，目前為止，Google 也尚未在地圖上擺\放廣告。 第一個範例：在網頁嵌入 Google Maps 當你取得一把 API Key 之後，我們就可以來寫第一個範例了，這個範例相當簡單： 看範例所呈現的結果 第一行紅字的部分就是用你取得的 Key 去載入 Google Maps API，這裡要注意的是，你一定要用你自己的 URL 去取得這把 Key，否則網頁在載入時，會得到錯誤訊息。接下來，宣告一個 div 區塊用來擺\置地圖，style=\"width: 300px; height:300px\" 則是用來指定地圖區塊大小。 再來利用 var map = new GMap (document.getElementById(\"mymap\")); 宣告一個 GMap 物件。而 map.centerAndZoom(new GPoint(139.7600, 35.6700), 1); 則是將地圖的中心點固定在經度 139.7600 和緯度 35.6700，而 Zoom Level 在這範例中設成 1 (1 為最大，數字越大 Zoom Level 越小)。在這邊你或許\會有個疑問，要怎麼知道某個地點的經緯度？如果你是在美國或加拿大，有些網站會提供依照地址查詢經緯度的服務，但是其他國家就比較麻煩了，而我有個比較簡單的方法你可以參考看看，也就是先利用 Google Maps 的大地圖找到你要的地點，將他固定在中間，然後按下網頁上的 Link to this page，這時候 Google Maps 就會顯示出這頁的 URL，URL 上就有該點的經緯度了，舉例來說，我想要找出日本京都車站的經緯度，我先用 Google Japan Maps 找到車站位置，並將他固定在中心，最後並取得連結：http://maps.google.co.jp/maps?ll=34.982050,135.761490&spn=0.012443,0.020262&hl=ja，紅字所標的就是京都車站的經緯度。 這個範例中，你有沒有覺得是不是少了什麼？那就是少了 Google Maps 中的控制項，沒有這個你沒辦法放大縮小地圖，也沒辦法切換衛星空照圖。如下範例你就可以在你的地圖中加入這兩個控制項： 看範例所呈現的結果 Google Maps API 內建四種控制項： GLargeMapControl : 適合給大型地圖的控制項。 GSmallMapControl : 適合給小型地圖的控制項。 GSmallZoomControl : 只有 Zoom Level 的調整，沒有地圖移動控制。 GMapTypeControl : 顯示地圖型態切換的控制項。 至於要用什麼控制項，你可以依照你所提供的地圖大小以及用途而定，每一種都試看看吧。 增加其他資訊：Marker，InfoWindow 或是 Polyline Google Maps API 好玩的地方是在於我們可以在地圖上面加很多東西，API 也提供一些基本的元件，包含你可以標示一個點，顯示資訊，甚至在地圖上畫線。 GMarker 先看看下面這個範例： 看範例所呈現的結果 我在這個範例中設立了一個 Marker 標示出京都車站的位置，京都車站經緯度取得的方式如前面所述，最重要的是要新增加一個 GMarker 物件，並將此 Marker 物件加入到 map 物件中。你也可以在地圖上標示好幾的 Marker，甚至可以用自訂的 icon 來標示。 Info Window 除了標示地點外，你也可以在 Marker 上顯示額外的資訊。 看範例所呈現的結果 上面這個程式，在當使用者點了該 Marker 時會出現一個方匡顯示你輸入的文字，這文字可以是 HTML 格式，也就是說允許\上面出現圖片等資訊。那可不可以不用去等到使用者點了之後才出現，可不可以在載入時就出現呢？好像是不行的，至少我測試的結果都會得到一些錯誤訊息。不過你可以這樣做： 看範例所呈現的結果 直接在地圖上顯示 Info Window，而不是在 Marker 上。但是 GMap 物件並沒有 openInfoWindowHtml() Function，只有 openInfoWindow() 可以用，而這個 Function 是以一個 DOM 物件作為參數，而非 HTML 格式的字串內容。 GPolyline 在地圖上畫線，這更酷了，請看以下範例： 看範例所呈現的結果 OK，這個範例要告訴你如何從京都車站搭公車到音羽山清水寺。我設定了一串的 GPoint 物件陣列，每個點都是線條轉折處，並利用此陣列新增了一個 GPolyline 物件，並將這 polyline 加到地圖中即可(你也可以自訂 Polyline 的顏色及大小)。你或許\還會注意到這個範例多了一些奇怪的東西，一個 namespace 以及一個 CSS style 設定，這是為了 IE 瀏覽器的相容性而加的，關於這個稍後會再提到。 瀏覽器相容性問題 Google Maps API 基本上沒有什麼瀏覽器相容性的問題，他支援的瀏覽器有： Firefox/Mozilla IE 5.5+ Safari 1.2+ Opera 除此外，你也可以利用 GBrowserIsCompatible() 函式來檢查使用者的瀏覽器是否有相容性上的問題。例如，你可以這樣做： 看範例所呈現的結果 另外，如果你有用到 GPolyline 物件，為了能夠在 IE 上也能夠正確顯示，你必須引用微軟的 VML namespace 以及增加一個 CSS Style 來正確顯示 VML，關於這個請參考：http://msdn.microsoft.com/library/default.asp?url=/workshop/author/VML/ref/appendix.asp，但是如果是只針對 Firefox/Mozilla 等瀏覽器則無此困擾。 其他資源 Google Maps API 討論群組 看看網路上其他 Google Maps 應用：Goole Maps Mania A Google Maps Extension - TLabel 文章來源 syshen\'s blog http://blog.roodo.com/syshen/archives/347151.html |
廣利不動產-板橋在地生根最實在--新板特區指名度最高、值得您信賴的好房仲 完整房訊，房屋、店面熱門精選物件，廣利不動產 優質仲介，房屋租賃、買賣資訊透明，交易真安心！ 廣利不動產-新板特區指名度最高、值得您信賴的好房仲 您的托付,廣利用心為您服務 |