Vue2-google- map Api如何将地图重新居中

Question

我正在使用vue2-google-maps api，我想有一个按钮，可以改变地图的中心位置。我需要包含哪些代码才能使地图重新居中。

我试过不同的功能，如map_center和mapCenter，但我就是找不到合适的，即使在网上搜索了很多次。

<div>
  <button @click="setCenter">Re-center</button>
  <br/>
</div>
<gmap-map
  :center="{ lat: 41.693206, lng: -86.228631 }"
  :zoom="12"
  style="width:100%;  height: 65vh;"
  :options="{
    zoomControl: true,
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    rotateControl: false,
    fullscreenControl: false,
    disableDefaultUi: false
  }"
>
</gmap-map>

<script>
export default {
  name: 'Home',
  methods: {
    setCenter () {
      this.map_center = {lat: '41.9028', lng: '12.4964'}
    }
  }
}
</script>

在main.js中：

import * as VueGoogleMaps from 'vue2-google-maps'

Vue.use(VueGoogleMaps, {
  load: {
    key: 'AIzaSyBNGgSXjtrJCMkZaqoxo2KGDe-DdJUVMa0',
    libraries: 'places'
  }
})

我预计当点击按钮时，地图将从IN的南本德移动到意大利的罗马。但是，单击该按钮时不会发生任何反应。

Answer 1

您必须创建一个名为map_center的data变量，以便它是响应式的：

export default {
    name: 'Home',
    data() {
        return {
            map_center: { lat: 41.693206, lng: -86.228631 }, 
        };
     },
     methods: {

然后将<gmap-map>组件的中心设置为使用map_center变量：

<gmap-map
    :center="map_center"
    :zoom="12"

我还没有测试这个解决方案。因此，如果这不起作用，那么与它非常接近的东西将会起作用。

Answer 2

lat和lng值以字符串值的形式提供：

{lat: '41.9028', lng: '12.4964'}
       ^^^^^^^^       ^^^^^^^^   
        expects number

这是不正确的，因为Map组件要求center属性为LatLng或LatLngLiteral类型。

以下是一个更新的示例，演示了如何在按钮单击时将地图居中：

<template>
  <div>
    <div>
      <button @click="setCenter">Re-center</button>
      <br />
    </div>
    <GmapMap :center="center" :zoom="zoom" style="width:100%;  height: 65vh;"></GmapMap>
  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      zoom: 8,
      center: { lat: 45.518, lng: -122.672 }
    };
  },
  methods: {
    setCenter() {
      this.center = { lat: 41.9028, lng: 12.4964 };
    }
  }
};
</script>