循环google地图并在不同的地图中显示每个位置，VUE JS

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

<template>
  <div>
    <div id="map"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 创建地图实例
    const map = new google.maps.Map(document.getElementById("map"), {
      center: { lat: 37.7749, lng: -122.4194 }, // 设置地图中心点的经纬度
      zoom: 12, // 设置地图缩放级别
    });

    // 循环位置数据并在地图上显示每个位置
    this.locations.forEach((location) => {
      const marker = new google.maps.Marker({
        position: { lat: location.lat, lng: location.lng }, // 设置标记的经纬度
        map: map, // 将标记添加到地图上
        title: location.name, // 设置标记的标题
      });
    });
  },
  data() {
    return {
      locations: [
        { name: "位置1", lat: 37.7749, lng: -122.4194 },
        { name: "位置2", lat: 37.7749, lng: -122.4294 },
        // 添加更多位置数据...
      ],
    };
  },
};
</script>

<style>
#map {
  width: 100%;
  height: 400px;
}
</style>

import Vue from "vue";
import MapComponent from "./MapComponent.vue";

new Vue({
  el: "#app",
  components: {
    MapComponent,
  },
  template: "<MapComponent/>",
});