如何在vue.js项目中在谷歌地图上添加多个圆

npm install vue2-google-maps

import * as VueGoogleMaps from 'vue2-google-maps';

export default {
  // ...
  components: {
    'google-map': VueGoogleMaps.Map,
    'google-marker': VueGoogleMaps.Marker,
    'google-circle': VueGoogleMaps.Circle
  },
  // ...
}

<template>
  <div>
    <google-map :center="center" :zoom="zoom">
      <google-circle v-for="(circle, index) in circles" :key="index" :center="circle.center" :radius="circle.radius" :options="circle.options"></google-circle>
    </google-map>
  </div>
</template>

export default {
  // ...
  data() {
    return {
      center: { lat: 37.7749, lng: -122.4194 }, // 地图中心点的经纬度
      zoom: 10, // 地图缩放级别
      circles: [
        {
          center: { lat: 37.7749, lng: -122.4194 }, // 圆心的经纬度
          radius: 1000, // 圆的半径（单位：米）
          options: {
            fillColor: '#FF0000', // 圆的填充颜色
            fillOpacity: 0.35, // 圆的填充透明度
            strokeColor: '#FF0000', // 圆的边框颜色
            strokeOpacity: 0.8, // 圆的边框透明度
            strokeWeight: 2 // 圆的边框宽度
          }
        },
        // 可以添加更多的圆
      ]
    };
  },
  // ...
}

import * as VueGoogleMaps from 'vue2-google-maps';

Vue.use(VueGoogleMaps, {
  load: {
    key: 'YOUR_API_KEY',
    libraries: 'places' // 如果需要使用地点搜索等功能，可以添加对应的库
  }
});