Как реализовать автоцентрирование и автозум в vue2-google-maps?

Question

[kuzubina]

Каким способом можно реализовать автоцентрирование и автозум гугл карт, когда выводятся одновременно несколько локаций, чтобы они все попадали в поле видимости пользователя, используя модуль vue2-google-maps?

Answer 1

[0xD34F]

<gmap-map
  ref="map"
  ...

const bounds = new google.maps.LatLngBounds();
массивКоординатВашихЛокаций.forEach(n => bounds.extend(n));
this.$refs.map.fitBounds(bounds);

https://codesandbox.io/s/for-https-qna-habr-com-q-...

Comments

[kuzubina]

<template>
  <div class="maps-box" v-if="clubs.search.data.length" id="start">
    <GmapMap
    :center="{
        lat: clubs.search.data[0].latitude,
        lng: clubs.search.data[0].longitude,
    }"
    ref="map"
    :zoom="10"
    :options="{
        fullscreenControl: false,
        disableDefaultUI: true,
        zoomControl: true,
    }"
    >
    <GmapMarker
        :key="index"
        v-for="(club, index) in clubs.search.data"
        :position="{
        lat: club.latitude,
        lng: club.longitude,
        }"
        :clickable="true"
        :draggable="true"
        :options="{
        icon: require('assets/image/marker.svg'),
        }"
    />
    </GmapMap>
</div>
</template>

<script>
import { gmapApi } from 'vue2-google-maps'

export default {
  mounted() {

    // maps fitBounds
    const bounds = new google.maps.LatLngBounds()
    this.clubs.search.data.forEach(n =>
      bounds.extend({
        lat: n.latitude,
        lng: n.longitude,
      }),
    )
    this.$refs.map.fitBounds(bounds)
  },
  computed: {
    google: gmapApi,
    ...mapGetters({
      clubs: 'club/getResult',
    }),
  },
}
</script>


получаю ошибку постоянно google is not defined

[0xD34F]

kuzubina, а это что:

computed: {
  google: gmapApi,

??

Предлагаю вам немного подумать.

[kuzubina]

0xD34F, так в доке написано для nuxt.js.......... уже всю голову поломал)

[0xD34F]

kuzubina, чего поломал? Совсем уже обленились. Добавил в ответ ссылку на пример. Дальше сами.

[kuzubina]

0xD34F, Нет, не обленился) пробовал через this.google и все равно полуяаю ошибку
TypeError: Cannot read properties of null (reading 'maps') на строке
const bounds = new this.google.maps.LatLngBounds()

[0xD34F]

kuzubina, cказал же - дальше сами. Или новый вопрос оформляйте - не хотите работать головой, будете работать руками.

[kuzubina]

0xD34F, Спасибо))