使用Google Maps API和JQuery文章將標記添加到地圖中

對於Google Maps代碼，我們可以直接鏈接到Google服務器：>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

>傳感器= false參數指定我們不想使用傳感器（例如GPS定位器）來確定用戶的位置。

現在我們有了基本庫，我們可以開始構建我們的功能。 >

概述腳本

讓我們從我們的地圖代碼的骨架開始：

>我們將所有映射功能包裝在稱為mymap的JavaScript對像中，這將有助於避免頁面上與其他腳本的潛在衝突。該對象包含兩個變量和兩個函數。地圖變量將存儲對我們將創建的Google Map對象的引用，並且BONDS變量將存儲一個包含我們所有標記的邊界框。當我們添加了所有標記之後，當我們想以同一時間可見的方式縮放地圖時，這將很有用。

var MYMAP = {
  bounds: null,
  map: null
}
MYMAP.init = function(latLng, selector) {
  ⋮
}
MYMAP.placeMarkers = function(filename) {
  ⋮
}

>。 現在，對於方法：init將在頁面上找到一個元素，並將其初始化為具有給定中心和縮放級別的新的Google地圖。同時，placemarkers以XML文件的名稱，並將在該文件的坐標數據中加載，以在地圖上放置一系列標記。

加載地圖

>現在我們已經有了基本的結構，讓我們寫下我們的init函數：>

>我們使用傳遞給該方法的參數創建一個對象文字包含一組選項。然後，我們初始化了Google Maps API中定義的兩個對象（一個地圖和一個latlngbounds），然後將它們分配給我們為此目的提前設置的mymap對象的屬性。

>

地圖構造函數傳遞給頁面上的地圖以及一組選項。我們已經準備好了的選項，但是要檢索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函數：>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

此功能更複雜，但是很容易理解。首先，我們調用JQuery的$ .GET方法來執行Ajax獲取請求。該方法採用兩個參數：要請求的URL（在這種情況下為我們的本地XML文件），並在請求結束時執行回調函數。反過來，該功能將通過對請求的響應傳遞，在這種情況下，這將是我們的XML。

jQuery對待XML與HTML完全相同，因此我們可以使用$（xml）.find（'marker'）。每個（…）在響應XML中的每個標記元素上循環，並在地圖上創建一個標記每個。

>我們獲取標記的名稱和地址，然後為每個標記創建一個新的latlng對象，我們將其分配到一個點變量。我們將邊界框擴展到包括該點，然後在地圖上的該位置創建一個標記。

>我們希望每當用戶點擊這些標記時出現工具提示氣泡，並且我們希望它包含位置的名稱和地址。 因此，我們需要使用MAPS API Event.Addlistener方法將事件偵聽器添加到每個標記中。但是，在這樣做之前，我們將創建工具提示本身。在Google Maps API中，這種類型的工具提示稱為InfowDindow。因此，我們創建了一個新的InfowDINDOW，並設置了一些HTML，以填充必要的信息。然後，我們添加活動聽眾。每當單擊一個標記時，偵聽器都會發射，並設置InfowDindow的內容並打開它，以便在地圖上可見。

> 最後，在添加所有標記及其關聯的事件處理程序和InfowDondow之後，我們使用MAPS API的FitBounds方法將地圖適合標記。 我們需要通過的只是我們一直擴展的範圍對象，以包括每個標記。這樣，無論地圖的放大或放置在哪裡，它始終將恢復到理想的變焦級別，其中包括我們所有標記。

>

將它們全部捆綁在一起

>現在我們的代碼已經準備就緒，讓我們將其付諸實踐。我們將使用jQuery的$（'document'）。準備等到加載頁面，然後初始化地圖，並使用#map selector字符串將其指向頁面元素：

>

我們還將單擊事件偵聽器附加到#Showmarkers按鈕。單擊該按鈕時，我們將帶有URL的PlaceMarkers函數調用到我們的XML文件。給它一個旋轉，您會在地圖上看到一組自定義標記。

var MYMAP = {
  bounds: null,
  map: null
}
MYMAP.init = function(latLng, selector) {
  ⋮
}
MYMAP.placeMarkers = function(filename) {
  ⋮
}

摘要

>您可能猜到了Google Maps API比什麼要多得多我們已經在這裡介紹了，因此請務必查看文檔，以了解所有可能的東西。如果您喜歡閱讀這篇文章，那麼您會喜歡學習；從大師那裡學習新鮮技能和技術的地方。成員可以立即訪問SitePoint的所有電子書和互動在線課程，例如JQuery基礎知識。

常見問題（常見問題解答）關於使用jQuery

的Google Maps API

>如何將Google Maps API與jQuery集成？

>將Google Maps API與jQuery集成涉及幾個步驟。首先，您需要在HTML文件中包含Google Maps API腳本。然後，您需要在JavaScript文件中初始化地圖。您可以使用jQuery選擇要顯示地圖的HTML元素。然後，您可以使用Google Maps API方法根據您的需求自定義地圖。請記住用腳本標籤中的實際API鍵替換'your_api_key'。

>如何自定義使用Google Maps API和jQuery顯示顯示的映射？

Google Map API提供了幾個可以自定義的選項地圖。您可以設置縮放級別，將地圖置於特定位置，然後選擇要顯示的地圖的類型。您還可以將標記，信息窗口和事件偵聽器添加到地圖中。所有這些自定義都可以在JavaScript文件中進行，在此初始化地圖。

如何將標記添加到地圖上？

>在地圖上添加標記涉及創建Google的新實例.maps.Marker類並指定構造函數中的位置和映射選項。位置選項應為Google.maps.latlng對象，代表標記的地理坐標。地圖選項應為google.maps.map對象，代表應顯示標記的地圖。

>

>如何將信息windows添加到標記中？通過創建google.maps.infowwindow類的新實例並在構造函數中指定內容選項來標記。內容選項應是代表要在信息窗口中顯示的HTML內容的字符串。然後，您可以使用Info窗口對象的打開方法在單擊標記時顯示信息窗口。

>

>如何將事件偵聽器添加到標記中？使用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 Cloud Platform控制台獲得。您需要創建一個新項目，啟用Google Maps JavaScript API，並創建一個新的API密鑰。

我如何處理Google Maps API中的錯誤？

Google Maps API中的錯誤使用Google.maps.event類的AddDomListener方法來處理。 AddDomListener方法的第一個參數應該是窗口對象，第二個參數應該是“錯誤”事件，第三個參數應在發生錯誤時要執行的函數。

以上是使用Google Maps API和JQuery文章將標記添加到地圖中的詳細內容。更多資訊請關注PHP中文網其他相關文章！