如何使用 JavaScript 在 Google 地圖上透過 InfoWindows 輕鬆實現多個標記？

JavaScript 中的簡單Google 地圖多標記實作

在本教學中，我們將探索在Google 上建立多個標記的簡化方法地圖。

概述

對於探索 Google Maps API 的初學者來說，在地圖上繪製多個標記似乎很複雜。本教程提供了一個簡單明了的解決方案。

範例資料

讓我們使用 Google的範例資料數組：

var locations = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 151.259052, 5],
  // ... Additional beach locations
];

建立地圖

首先，我們初始化一個Googl e地圖：

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 10,
  center: { lat: -33.92, lng: 151.25 },
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

建立標記

要建立多個標記，我們迭代位置數組：

var marker, i;
for (i = 0; i <p><strong>新增彈出資訊視窗</strong></p><p>我們為每個點擊時顯示海灘名稱的標記：</p><pre class="brush:php;toolbar:false">var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function(marker, i) {
  return function() {
    infowindow.setContent(locations[i][0]);
    infowindow.open(map, marker);
  }
})(marker, i));

完整結果

下面的完整程式碼片段包括多標記功能所需的所有元素：

// HTML with map container

 
 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>
 

  <div><p>按照以下步驟，您可以在 Google 上使用彈出式 InfoWindows 輕鬆繪製多個標記地圖。 </p></div>

以上是如何使用 JavaScript 在 Google 地圖上透過 InfoWindows 輕鬆實現多個標記？的詳細內容。更多資訊請關注PHP中文網其他相關文章！