放大vue2谷歌地图在页面加载时不受尊重

Question

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

Answer 1

问题是:zoom=15，如果将值直接分配给任何属性，则应将其作为:zoom="15"

或者，如果您想在运行时更改缩放级别，请在数据对象中声明一个属性并将其用作:zoom="zoomLevel"

data () {
return {
map: null,
locations: [],
zoomLevel: 15
}
},

Answer 2

您使用的是哪个版本的vue2谷歌地图？最近在2018年12月报道了一个缩放级别的isue：https://github.com/xkjyeah/vue-google-maps/issues/561

确保您的版本>0.10.x