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'
  }
})

我希望单击该按钮时，地图将从印第安纳州南本德移动到意大利罗马。但是，单击按钮后什么也没有发生。

Answer 1

您必须创建一个名为data的{{1}}变量，以使其具有反应性：

map_center

然后将export default { name: 'Home', data() { return { map_center: { lat: 41.693206, lng: -86.228631 }, }; }, methods: {组件的中心设置为使用<gmap-map>变量：

map_center

我尚未测试解决方案。因此，如果这种方法行不通，那么很接近的事情就会解决。

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>

Vue2-google-maps Api如何更新地图

2 个答案: