Question

我的登录页面上有一个自动填充组件，可在其中捕获用户地址详细信息（纬度，经度，地址等）

我将这些详细信息提交给商店：

  locate ({commit}, payload) {
    commit('setLong', payload.long);
    commit('setLat' , payload.lat);
    commit('setAddress', payload.address);
  }

然后，将用户定向到下一个页面（组件），从刚刚输入的地址中显示附近的一些地方。

我正在使用vue-googlemaps npm软件包，该软件包需要您设置默认的中心数据（基本上是默认的LatLng）：

模板：

<googlemaps-map
  class="map"
  :center.sync="center"
  :zoom="12"
>

脚本：

data: function () {
  return {
   center: {
     lat: 48.8566,
     lng: 2.352
   },
  }
}

我正在使用Vuex从商店中获取数据：

...mapGetters([
    'address',
    'lng',
    'lat'
]),

然后将这些值设置为返回数据，如上所示：

data: function () {
  return {
   center: {
     lat: this.lat,
     lng: this.lng
   },
  }
}

这似乎根本不起作用-我遇到了多个错误，我认为这是因为从附近商店读取的数据在附近的场所组件加载之前不可用。

我一直在努力解决这个问题，我们将不胜感激。

Answer 1

您只能使用lat检查lng和v-if可用时的渲染地图

<googlemaps-map
  class="map"
  :center.sync="center"
  :zoom="12"
  v-if="this.lat && this.lng"
>
...
...
data() {
  return {}
},
computed: {
  center() {
    return {
      lat: this.lat,
      lng: this.lng
    }
  }
}

此外，您可以将center更改为计算属性以使其具有反应性。

使用自动完成功能中的LatLng通过vue-googlemaps

1 个答案: