在Vue JS Google Maps上添加多个标记

可以通过以下步骤完成：

首先，确保你已经在Vue项目中引入了Google Maps API。你可以在index.html文件中添加以下代码：

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

请确保将YOUR_API_KEY替换为你自己的Google Maps API密钥。

在Vue组件中，你可以使用Google Maps JavaScript API提供的google.maps.Map类来创建地图对象。在created生命周期钩子函数中，你可以初始化地图，并设置中心点和缩放级别。以下是一个简单的示例：

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

<script>
export default {
  data() {
    return {
      map: null,
      markers: [
        { lat: 37.7749, lng: -122.4194, title: 'San Francisco' },
        { lat: 34.0522, lng: -118.2437, title: 'Los Angeles' },
        { lat: 41.8781, lng: -87.6298, title: 'Chicago' }
      ]
    };
  },
  created() {
    this.initializeMap();
  },
  methods: {
    initializeMap() {
      this.map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 37.7749, lng: -122.4194 },
        zoom: 10
      });

      this.addMarkers();
    },
    addMarkers() {
      this.markers.forEach(marker => {
        new google.maps.Marker({
          position: { lat: marker.lat, lng: marker.lng },
          map: this.map,
          title: marker.title
        });
      });
    }
  }
};
</script>

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

在上述示例中，我们在data选项中定义了一个markers数组，其中包含了三个标记的经纬度和标题。在initializeMap方法中，我们创建了一个地图对象，并在其中添加了每个标记。