使用 vue2-google-maps 时如何在谷歌地图内放置一个圆圈？答案

【问题标题】：How to fit a circle inside a Google Maps when using vue2-google-maps?使用 vue2-google-maps 时如何在谷歌地图内放置一个圆圈？
【发布时间】：2019-07-22 19:26:05
【问题描述】：

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

【问题讨论】：

标签： google-maps vuejs2 vue2-google-maps

【解决方案1】：

就此而言，可以通过$refs 属性访问 Google 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>

【讨论】：