如何在地图中创建多个标记？一步步轻松实现

Google 地图 JS API v3 中的简单多标记示例

简介

绘制多个标记是 Google 地图中最常见的功能之一，但对于初学者来说可能有些困难。本指南将引导你创建一个简单易懂的多标记示例，展示如何在 Google 地图中标记多个位置。

步骤

1. 加载 Google 地图 API

在你的 HTML 文档中加载 Google 地图 API：

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

2. 创建地图实例

创建一个地图实例：

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -33.8688, lng: 151.2195},
    zoom: 12
  });
}

3. 创建标记数组

使用示例数据创建一个标记数组：

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

4. 循环标记数据

使用 forEach() 方法循环遍历标记数据：

locations.forEach(function(location) {
  var marker = new google.maps.Marker({
    position: {lat: location[1], lng: location[2]},
    map: map,
    title: location[0]
  });

  // 创建信息窗口
  var infoWindow = new google.maps.InfoWindow({
    content: location[0]
  });

  // 为标记添加事件侦听器
  marker.addListener('click', function() {
    infoWindow.open(map, marker);
  });
});

5. 显示地图

最后，调用 initMap() 函数来初始化地图：

window.onload = initMap;

结论

遵循这些步骤，你将能够轻松地在 Google 地图中创建多标记示例。这种方法简单易懂，适合初学者。希望本指南对你有帮助！

常见问题解答

• 如何自定义标记图标？
  你可以通过设置 icon 属性来自定义标记图标，如下所示：

  var marker = new google.maps.Marker({
    icon: 'path/to/custom_icon.png',
    ...
  });
  

• 如何添加标记群集？
  你可以使用 MarkerClusterer 库添加标记群集，如下所示：

  var markerClusterer = new MarkerClusterer(map, markers, {
    imagePath: 'path/to/cluster_images/'
  });
  

• 如何显示标记的标题和信息窗口？
  你可以设置 title 属性来显示标记的标题，并通过添加事件侦听器来显示信息窗口：

  marker.setTitle('Bondi Beach');
  marker.addListener('click', function() {
    infoWindow.open(map, marker);
  });
  

• 如何定位用户当前位置？
  你可以使用 navigator.geolocation API 定位用户当前位置，如下所示：

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
  
      map.setCenter(pos);
    });
  }
  

• 如何在地图上绘制线段或多边形？
  你可以使用 Polyline 或 Polygon 类在地图上绘制线段或多边形，如下所示：

  var polyline = new google.maps.Polyline({
    path: [{lat: -33.890542, lng: 151.274856}, {lat: -33.923036, lng: 151.259052}],
    map: map
  });