使用自动完成中的 LatLng 使用 vue-googlemaps 查找附近的地方答案

【问题标题】：Use LatLng from autocomplete to find nearby place using vue-googlemaps使用自动完成中的 LatLng 使用 vue-googlemaps 查找附近的地方
【发布时间】：2019-11-28 04:05:33
【问题描述】：

我的登录页面上有一个自动完成组件，用于捕获用户地址详细信息（纬度、经度、地址等）

我将这些细节提交给商店：

  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
   },
  }
}

这似乎根本不起作用 - 我遇到了多个错误，我假设这是因为我从商店检索的数据在附近的地方组件加载之前不可用。

我一直在为这个问题头疼，我们将不胜感激。

【问题讨论】：

标签： google-maps vue.js maps vuex

【解决方案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 更改为计算属性以使其具有反应性。

【讨论】：