使用 vue2-google-maps 时如何在 Google 地图中放置一个圆圈？

Question

我在 this question 上发现您可以使用 fitBounds() 使圆适合地图。我尝试在使用 vue2-google-maps 时使用它，但没有用。使用这个库时它的等价物如何？

Answer 1

就此而言 Google 可以通过 $refs 属性访问 Maps Circle 对象：

<GmapCircle
    ref="circleRef" 
    :center="{ lat: 52.521248, lng: 13.399038 }"
    :radius="400000"
    :visible="true"
    :options="{fillColor:'blue',fillOpacity:0.2}"
/>

然后地图视口设置圆形边界如下：

mounted: function() {
    this.$refs.circleRef.$circlePromise.then(() => {
        const {$circleObject} = this.$refs.circleRef; //get google.maps.Circle object
        const map = $circleObject.getMap(); //get map instance 
        map.fitBounds($circleObject.getBounds());
   })
}

例子

<template>
  <div>
    <GmapMap :center="center" :zoom="zoom">
      <GmapCircle
        ref="circleRef" 
        :center="{ lat: 52.521248, lng: 13.399038 }"
        :radius="400000"
        :visible="true"
        :options="{fillColor:'blue',fillOpacity:0.2}"
      ></GmapCircle>
    </GmapMap>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zoom: 5,
      center: { lat: 59.339025, lng: 18.065818 }
    };
  },
  mounted: function() {
    this.$refs.circleRef.$circlePromise.then(() => {
        const {$circleObject} = this.$refs.circleRef; //get google.maps.Circle object
        const map = $circleObject.getMap();
        map.fitBounds($circleObject.getBounds());
    })
  }
};
</script>

<style>
.vue-map-container {
  height: 640px;
}
</style>

使用 vue2-google-maps 时如何在 Google 地图中放置一个圆圈？

How to fit a circle inside a Google Maps when using vue2-google-maps?

google-maps

vuejs2

vue2-google-maps