时间戳

首页 > 解决方案 > 放大页面加载时不支持的 vue2-google-maps

vue.js - 放大页面加载时不支持的 vue2-google-maps

问题描述

输入新位置时，我的地图的缩放功能不会停留在 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>

标签： vue.jsgoogle-maps-api-3vuexvue-routervue2-google-maps

解决方案

您使用的是什么版本的 vue2-google-maps？最近在 12/2018 报告的缩放级别存在问题：https ://github.com/xkjyeah/vue-google-maps/issues/561

确保您的版本 > 0.10.x

推荐阅读