如何使用 JavaScript 在 Google 地圖上透過 InfoWindows 輕鬆實現多個標記？-js教程-PHP中文網

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

DDD

發布： 2024-12-31 04:22:09

原創

902 人瀏覽過

How to Easily Implement Multiple Markers with InfoWindows on a Google Map using JavaScript?

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 < locations.length; i++) {
  marker = new google.maps.Marker({
    position: { lat: locations[i][1], lng: locations[i][2] },
    map: map
  });
}

登入後複製

新增彈出資訊視窗

我們為每個點擊時顯示海灘名稱的標記：

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
<!DOCTYPE html>
<html> 
<head> 
  <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 上使用彈出式 InfoWindows 輕鬆繪製多個標記地圖。

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