如何使用 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
];

创建地图

首先，我们初始化一个Google地图：

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中文网其他相关文章！