如何使用 Google Maps JS API v3 將具有自訂 InfoWindows 的多個標記輕鬆新增至 Google 地圖？
- Susan Sarandon原創
- 2024-12-18 17:00:11142瀏覽
Google Maps JS API v3 - 多個標記的簡單範例
在Google 地圖上建立多個標記可能是一項艱鉅的任務，尤其是適合API 新手。為了簡化這個過程，我們將深入研究一個簡單的範例，引導您完成必要的步驟。
考慮 Google 提供的以下資料陣列：
var locations = [ ['Bondi Beach', -33.890542, 151.274856, 4], ['Coogee Beach', -33.923036, 151.259052, 5], ['Cronulla Beach', -34.028249, 151.157507, 3], ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], ['Maroubra Beach', -33.950198, 151.259302, 1] ];
目標是繪製這些標記在地圖上，並在點擊標記時顯示包含名稱的資訊視窗。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers</title>
<script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY"
type="text/javascript"></script>
</head>
<body>
<div>
此程式碼建立以雪梨為中心的地圖，澳大利亞，縮放等級為 10。它為數組中的每個海灘動態產生標記，每個標記在單擊時顯示一個包含海灘名稱的資訊視窗。
請注意，按一下事件的事件偵聽器使用閉包以在執行回調函數期間保留標記和陣列索引的值。
透過執行以下步驟，您可以輕鬆地將具有自訂 infoWindows 的多個標記新增至您自己的 Google 地圖視覺化。
以上是如何使用 Google Maps JS API v3 將具有自訂 InfoWindows 的多個標記輕鬆新增至 Google 地圖？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn