Как вписать круг в Карты Google при использовании vue2-google-maps? - PullRequest
Новая
       27

Как вписать круг в Карты Google при использовании vue2-google-maps?

0 голосов
/ 28 февраля 2019

Я нашел на этот вопрос , что вы можете использовать fitBounds (), чтобы подогнать окружность к карте.Я пытался использовать его во время использования vue2-google-maps, и это не сработало.Как это будет эквивалентно при использовании этой библиотеки?

1 Ответ

0 голосов
/ 03 марта 2019

В этом отношении к объекту Google Maps Circle можно получить доступ через атрибут $refs: 

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