如何在 Google Maps JS API v3 中輕鬆顯示多個標記和資訊視窗？
- Mary-Kate Olsen原創
- 2024-12-20 17:12:10808瀏覽
Google Maps JS API v3 中的多標籤顯示
簡介
在Google地圖上顯示多個標記簡介
在Google地圖上顯示多個標記簡介
在Google地圖上顯示多個標記簡介
在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] ];方法
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
});先從陣列中擷取標記數據，如 Google 範例所示：2。初始化地圖：
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));
}在 div 元素中實例化一個新的 Google 地圖，提供縮放、居中和地圖類型等選項。 3.新增標記和資訊視窗：
<!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>循環遍歷位置陣列並為每個位置建立一個標記。當您按一下標記時，將顯示一個包含位置名稱的資訊視窗。 示例代碼
- 以下完整代碼片段演示了實現：
- 額外注意事項
以上是如何在 Google Maps JS API v3 中輕鬆顯示多個標記和資訊視窗？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn