對於Google Maps代碼,我們可以直接鏈接到Google服務器:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
現在我們有了基本庫,我們可以開始構建我們的功能。
概述腳本
>我們將所有映射功能包裝在稱為mymap的JavaScript對像中,這將有助於避免頁面上與其他腳本的潛在衝突。該對象包含兩個變量和兩個函數。地圖變量將存儲對我們將創建的Google Map對象的引用,並且BONDS變量將存儲一個包含我們所有標記的邊界框。當我們添加了所有標記之後,當我們想以同一時間可見的方式縮放地圖時,這將很有用。
var MYMAP = { bounds: null, map: null } MYMAP.init = function(latLng, selector) { ⋮ } MYMAP.placeMarkers = function(filename) { ⋮ }
加載地圖
>現在我們已經有了基本的結構,讓我們寫下我們的init函數:
>
地圖構造函數傳遞給頁面上的地圖以及一組選項。我們已經準備好了的選項,但是要檢索DOM元素,我們需要將Selector String傳遞給輸入,並使用jQuery $函數在頁面上查找項目。因為$返回jQuery對象而不是原始的DOM節點,所以我們需要使用[0]向下鑽探:這允許我們訪問“裸” dom node。 ll在頁面上顯示我們的地圖,並有一個空的邊界框,隨時可以在添加標記時擴展。MYMAP.init = function(selector, latLng, zoom) { var myOptions = { zoom:zoom, center: latLng, mapTypeId: google.maps.MapTypeId.ROADMAP } this.map = new google.maps.Map($(selector)[0], myOptions); this.bounds = new google.maps.LatLngBounds();}
添加標記
說到哪個,讓我們看一下placemarkers函數: 此功能更複雜,但是很容易理解。首先,我們調用JQuery的$ .GET方法來執行Ajax獲取請求。該方法採用兩個參數:要請求的URL(在這種情況下為我們的本地XML文件),並在請求結束時執行回調函數。反過來,該功能將通過對請求的響應傳遞,在這種情況下,這將是我們的XML。
>我們希望每當用戶點擊這些標記時出現工具提示氣泡,並且我們希望它包含位置的名稱和地址。 因此,我們需要使用MAPS API Event.Addlistener方法將事件偵聽器添加到每個標記中。但是,在這樣做之前,我們將創建工具提示本身。在Google Maps API中,這種類型的工具提示稱為InfowDindow。因此,我們創建了一個新的InfowDINDOW,並設置了一些HTML,以填充必要的信息。然後,我們添加活動聽眾。每當單擊一個標記時,偵聽器都會發射,並設置InfowDindow的內容並打開它,以便在地圖上可見。 >
我們還將單擊事件偵聽器附加到#Showmarkers按鈕。單擊該按鈕時,我們將帶有URL的PlaceMarkers函數調用到我們的XML文件。給它一個旋轉,您會在地圖上看到一組自定義標記。 >將Google Maps API與jQuery集成涉及幾個步驟。首先,您需要在HTML文件中包含Google Maps API腳本。然後,您需要在JavaScript文件中初始化地圖。您可以使用jQuery選擇要顯示地圖的HTML元素。然後,您可以使用Google Maps API方法根據您的需求自定義地圖。請記住用腳本標籤中的實際API鍵替換'your_api_key'。 Google Map API提供了幾個可以自定義的選項地圖。您可以設置縮放級別,將地圖置於特定位置,然後選擇要顯示的地圖的類型。您還可以將標記,信息窗口和事件偵聽器添加到地圖中。所有這些自定義都可以在JavaScript文件中進行,在此初始化地圖。 > >如何獲得Google Maps的API鍵?可從Google Cloud Platform控制台獲得。您需要創建一個新項目,啟用Google Maps JavaScript API,並創建一個新的API密鑰。 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
>
var MYMAP = {
bounds: null,
map: null
}
MYMAP.init = function(latLng, selector) {
⋮
}
MYMAP.placeMarkers = function(filename) {
⋮
}
常見問題(常見問題解答)關於使用jQuery
的Google Maps API
>如何將Google Maps API與jQuery集成?
>如何自定義使用Google Maps API和jQuery顯示顯示的映射?
如何將標記添加到地圖上?
>在地圖上添加標記涉及創建Google的新實例.maps.Marker類並指定構造函數中的位置和映射選項。位置選項應為Google.maps.latlng對象,代表標記的地理坐標。地圖選項應為google.maps.map對象,代表應顯示標記的地圖。 >
>如何將事件偵聽器添加到標記中?使用Google.maps.event類的AddListener方法添加到標記中。 AddListener方法的第一個參數應該是標記對象,第二個參數應該是事件的名稱,第三個參數應是事件發生時要執行的函數。顯示的映射的類型? >可以通過設置映射對象的maptypeid選項來更改顯示的映射類型。 maptypeid選項應為以下值之一:google.maps.maptypeid.roadmap,google.maps.maptypeid.satellite,google.maps.maptypeid.hhybrid,或google.maps.maps.maptypeid.terrain.terrain.terrain。>如何通過設置映射對象的縮放選項來設置地圖的縮放級別?縮放選項應為代表縮放級別的數字。數字越高,越近ZOOM。目的。中心選項應為Google.maps.latlng對象,代表位置的地理坐標。
>我如何處理Google Maps API中的錯誤?
Google Maps API中的錯誤使用Google.maps.event類的AddDomListener方法來處理。 AddDomListener方法的第一個參數應該是窗口對象,第二個參數應該是“錯誤”事件,第三個參數應在發生錯誤時要執行的函數。
以上是使用Google Maps API和JQuery文章將標記添加到地圖中的詳細內容。更多資訊請關注PHP中文網其他相關文章!