如何使用 JavaScript 在 Google 地图上通过 InfoWindows 轻松实现多个标记？-js教程-PHP中文网

如何使用 JavaScript 在 Google 地图上通过 InfoWindows 轻松实现多个标记？

DDD

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

原创

901 人浏览过

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
];

登录后复制

创建地图

首先，我们初始化一个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 < 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中文网其他相关文章！