如何使用 Vue Google Maps 显示我的当前位置

Question

当我运行我的代码时，会显示一个坐标为 0、0 的地图，这是我初始化它的位置，但是当我将 lat 设置为 position.coords.latitude 时，该位置并没有更新到我当前的位置和 lng 到 position.coords.longitude。有什么想法可能是错的吗？

<template>
        <GmapMap
            :center="{lat: center.lat, lng: center.lng}"
            ...
          />
</template>


<script>
export default {
data () {
  return {
    center : { 
      lat : 0, 
      lng : 0 
    }
  }
},
methods: {
  getCurrentPosition() {
    Geolocation.getCurrentPosition().then(position => {
      console.log('Current', position)
      this.position = position
      this.center = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        }
    })
  },
	mounted () {
    this.getCurrentPosition(
    this.geoId = Geolocation.watchPosition({enableHighAccuracy: true}, (position, err) => {
      this.position = position
    })
  },
}
</script>

Answer 1

您确实应该提供有关您正在使用的依赖项的更多信息，并提供适当的代码示例（您一开始给我们的代码不会编译）。

---

从我所看到的代码来看，这似乎是一个反应性问题。

如果您希望 Vue 在您更新对象 时注册更改，请务必使用Vue.set 来执行此操作。

代替

this.center = {
  lat: position.coords.latitude,
  lng: position.coords.longitude
}

使用：

Vue.set(this, 'center', {
  lat: position.coords.latitude,
  lng: position.coords.longitude
})

---

或者，你可以使用这个技巧：

this.center = Object.assign({}, this.center, {
  lat: position.coords.latitude,
  lng: position.coords.longitude
})

Vue.js Reactivity in Depth