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

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

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