如何使用 JavaScript API v3 在 Google 地圖上透過資訊視窗輕鬆繪製多個標記？
- Mary-Kate Olsen原創
- 2024-12-23 15:48:12794瀏覽
簡化Google Maps JS API v3 中的多個標記繪製
使用Google Maps JavaScript API 時，繪製多個標記通常需要複雜的實現。本文為尋求顯示隨附資訊視窗的標記陣列的初學者提供了一個簡單的解決方案。
問題：
讓我們考慮一組具有對應名稱、座標的位置和參考值。目的是為地圖上的每個位置放置標記，並在單擊標記時顯示帶有名稱的資訊視窗。
解：
HTML和CSS:
<!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>
JavaScript:
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]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
說明：
- 說明：
- 地圖和顯示標記資訊的資訊視窗。
- 迭代通過位置數組並為每個位置建立一個標記物件。
- 將標記加入地圖。
使用事件偵聽器將資訊視窗與每個標記關聯起來，在下列情況下顯示位置的名稱：點選。
結果：
執行後，程式碼產生具有多個標記的 Google 地圖，表示輸入陣列中的位置。按一下任何標記都會開啟一個顯示其名稱的資訊視窗。
閉包注意：
程式碼利用閉包將標記和位置索引作為參數傳遞給事件偵聽器。如果不熟悉閉包，Mozilla 的開發中心提供了有關該主題的有用指南。以上是如何使用 JavaScript API v3 在 Google 地圖上透過資訊視窗輕鬆繪製多個標記？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
JavaScript css html Array Object if for require using Event map JS this location display input windows
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn