如何使用 Google Maps JS API v3 透過 InfoWindows 顯示多個標記？-js教程-PHP中文網

如何使用 Google Maps JS API v3 透過 InfoWindows 顯示多個標記？

Barbara Streisand

發布： 2024-12-20 15:45:10

原創

773 人瀏覽過

How to Display Multiple Markers with InfoWindows using the Google Maps JS API v3?

Google Maps JS API v3 - 簡單的多個標記範例

建立地圖和標記

首先，建立一個新的HTML 文件，並包含Google 地圖API 腳本和您的API 金鑰。接下來，設定 Map 物件並提供必要的參數：

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
});

登入後複製

建立 InfoWindow

定義一個 InfoWindow對象，該對像在其上顯示位置名稱標記點擊：

var infowindow = new google.maps.InfoWindow();

登入後複製

循環位置數據

接下來，迭代數據數組並為每個位置創建一個標記，並將其加入地圖：

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
  });

登入後複製

設定InfoWindows 的點擊事件

最後，為每個標記新增一個事件偵聽器，以便在下列情況下觸發InfoWindow 開啟：點選：

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

登入後複製

完整程式碼

完整程式碼如下：

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));
}

登入後複製

以上是如何使用 Google Maps JS API v3 透過 InfoWindows 顯示多個標記？的詳細內容。更多資訊請關注PHP中文網其他相關文章！