Question

我在this question上发现可以使用fitBounds（）使圆适合地图。我在使用vue2-google-maps时尝试使用它，但是它不起作用。使用该库时的效果如何？

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

使用vue2-google-maps时如何在Google Maps中拟合一个圆？

1 个答案: