Увеличение vue2-google-maps не учитывается при загрузке страницы - PullRequest
Новая
       75

Увеличение vue2-google-maps не учитывается при загрузке страницы

0 голосов
/ 01 ноября 2019

Функция масштабирования для моей карты не остается на уровне 15 при вводе нового местоположения.

У меня есть панель поиска на одной странице, которая затем отображает карту этого местоположения на другой странице. :zoom=15, кажется, не соблюдается при загрузке страницы. Я могу вручную изменить масштаб моего кода, обновить страницу и увидеть правильный масштаб. Но я бы хотел, чтобы страница загружалась с :zoom=15.

См. Код ниже: 

<template>
  <div>
    <GmapMap
      :center="{lat:10, lng:10}"
      :zoom=15
      class="my-map"
      id="myMap"
      ref="myMap"
      style="height:500px;width:500px;"
    >
      <GmapMarker
        :key="index"
        v-for="(m, index) in locations"
        :position="m"
        :clickable="true"
        :draggable="true"
        @click="center=m.position"
      />
    </GmapMap>
  </div>
</template>
<script>
import { gmapApi } from "vue2-google-maps"
export default {
  name: 'FindDefault',
  data () {
    return {
      map: null,
      locations: []
    }
  },
  computed: {
    google: gmapApi
  },
  mounted () {
    this.$refs.myMap.$mapPromise
      .then(map => {
        this.map = map
        const selection = this.$store.state.geoModule.mapSearchSelection
        this.filterCoords(selection)
        this.setBounds()
      })
      .catch(err => {
        throw err
      })
  },
  methods: {
    filterCoords (selection) {
      this.locations.push(selection.geometry.location)
    },
    setBounds () {
      let bounds = new this.google.maps.LatLngBounds()
      this.locations.forEach(loc => {
        bounds.extend(loc)
      })
      this.$nextTick().then(() => {
        this.$refs.myMap.fitBounds(bounds)
      })
      this.$refs.myMap.panToBounds(bounds)
    }
  }
}
</script>

Ответы [ 2 ]

0 голосов
/ 09 ноября 2019

Уровень масштабирования карты действительно может измениться, так как используется Map.fitBounds метод . Для обеспечения уровня масштабирования при начальной загрузке страницы , метод setBounds можно изменить следующим образом: 

setBounds() {
      google.maps.event.addListenerOnce(this.map, "bounds_changed", () => {
        if (this.map.getZoom() != 15) {
          this.map.setZoom(15); //enforcing zoom level
        }
      });

      let bounds = new this.google.maps.LatLngBounds();
      this.locations.forEach(loc => {
        bounds.extend(loc);
      });
      this.$nextTick().then(() => {
        this.$refs.myMap.fitBounds(bounds);
      });
    }
}
0 голосов
/ 01 ноября 2019

Какую версию vue2-google-maps вы используете? Была проблема с уровнем масштабирования, о котором сообщалось только 12/2018: https://github.com/xkjyeah/vue-google-maps/issues/561

Убедитесь, что ваша версия> 0.10.x

...