如何在Vue JS嵌入的Google Maps中添加多个经纬度标记点

嗨，这事儿其实很简单，咱们只需要把标记点的数据整理成数组，然后遍历数组批量创建标记就行啦！我帮你修改了你的Maps.vue代码，直接就能用：

<template>
  <card type="plain" title="Google Maps">
    <div id="map" class="map">
    </div>
  </card>
</template>
<script>
export default {
  mounted() {
    // 1. 准备多个标记点的数据数组，每个元素包含经纬度和标题
    const markersData = [
      { lat: 40.748817, lng: -73.985428, title: "纽约地标1" },
      { lat: 40.758000, lng: -73.985700, title: "纽约地标2" },
      { lat: 40.740000, lng: -73.990000, title: "纽约地标3" },
      // 你可以继续添加更多标记点
    ];

    // 初始化地图（这部分和你原来的代码一致）
    let mapOptions = {
      zoom: 13,
      // 可以把地图中心设置成数组里第一个点，或者计算中心点（可选）
      center: new window.google.maps.LatLng(markersData[0].lat, markersData[0].lng),
      scrollwheel: false,
      styles: [{
        "elementType": "geometry",
        "stylers": [{ "color": "#1d2c4d" }]
      }, {
        "elementType": "labels.text.fill",
        "stylers": [{ "color": "#8ec3b9" }]
      }, {
        "elementType": "labels.text.stroke",
        "stylers": [{ "color": "#1a3646" }]
      }, {
        "featureType": "water",
        "elementType": "labels.text.fill",
        "stylers": [{ "color": "#4e6d70" }]
      }]
    };
    let map = new window.google.maps.Map(
      document.getElementById("map"),
      mapOptions
    );

    // 2. 遍历标记点数组，逐个创建标记并添加到地图上
    markersData.forEach(markerInfo => {
      const marker = new window.google.maps.Marker({
        position: new window.google.maps.LatLng(markerInfo.lat, markerInfo.lng),
        title: markerInfo.title,
        map: map // 直接在创建时绑定到地图，和setMap(map)效果一样
      });

      // 如果你想给标记添加点击事件，比如弹出信息窗口，可以在这里加：
      // const infoWindow = new window.google.maps.InfoWindow({
      //   content: `<h3>${markerInfo.title}</h3>`
      // });
      // marker.addListener('click', () => {
      //   infoWindow.open(map, marker);
      // });
    });
  }
};
</script>

关键说明： #

• 标记点数据数组：把所有需要展示的标记点信息集中放在markersData里，后续要加新点直接往数组里加就行，非常好维护。
• 遍历创建标记：用forEach循环数组，每个元素对应一个标记实例，创建时直接通过map属性绑定到地图（也可以用你原来的marker.setMap(map)）。
• 可选优化：如果标记点分布很散，你可以计算所有点的中心点来设置地图中心，或者用google.maps.LatLngBounds让地图自动适配所有标记点的范围，这样用户打开地图就能看到所有标记啦。

内容的提问来源于stack exchange，提问作者Syed