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

Для реализации автоцентрирования и автозумирования на карте в пакете vue2-google-maps, нужно использовать некоторые функции и свойства, предоставляемые самим пакетом.

1. Сначала установите пакет vue2-google-maps, если он еще не установлен, с помощью команды:

npm install vue2-google-maps@next

2. Затем вам нужно будет создать ключ API Google Maps. Можно получить ключ следуя этим шагам: https://developers.google.com/maps/documentation/javascript/get-api-key

3. Далее, импортируем необходимые компоненты и ключ API Google Maps в ваш компонент Vue:

// ВашVueКомпонент.vue
<template>
  <div>
    <GmapMap :center="center" :zoom="zoom" style="width: 400px; height: 300px;">
      <!-- Ваши дополнительные настройки для карты -->
    </GmapMap>
  </div>
</template>

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

export default {
  data () {
    return {
      center: {
        lat: null, // Широта
        lng: null, // Долгота
      },
      zoom: 10, // Уровень масштабирования карты
    }
  },
  mounted () {
    this.getLocation()
  },
  methods: {
    getLocation () {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(this.setPosition)
      } else {
        console.log('Geolocation is not supported by this browser.')
      }
    },
    setPosition (position) {
      this.center.lat = position.coords.latitude
      this.center.lng = position.coords.longitude
    },
  },
  components: {
    GmapMap,
  },
}
</script>

4. В данной реализации широта и долгота будут автоматически получены через API Geolocation браузера пользователя, используя метод navigator.geolocation.getCurrentPosition.
После получения координат, они будут присвоены свойствам lat и lng объекта center, что приведет к автоцентрированию карты на полученные координаты.

5. Для автозумирования карты, вы также можете динамически изменять значение свойства zoom. Например, в зависимости от ближайшего города или региона, которые будут переданы через координаты. Вы можете изменить значение свойства zoom в методе setPosition с использованием метода this.$refs.map.zoom = <newZoomLevel>, где this.$refs.map - ссылка на вашу карту.

Таким образом, в итоге ваша карта будет центрирована и масштабирована автоматически в соответствии с полученными координатами.

Однако, помните, что для использования Google Maps API необходимо создать и указать в настройках проекта ключ API Google Maps.