Vue.js Vue2谷歌地图使用beforeEnter（）路由保护访问GMAPPI

上下文：我正试图通过

beforenter（）路径卫士上的place\u id获取位置数据。基本上，我希望在有人准确地输入url
www.example.com/place/{place\u id}
时加载数据。目前，当我使用自动完成输入，然后输入路由时，一切都可以直接工作，但当我从新选项卡直接访问url时，一切都不起作用。我相信这个问题是因为
google
尚未创建

问题：我如何使用
beforenter（）访问
PlacesService（）

错误：
未捕获（承诺中）引用错误：未定义google

示例代码：
在我的一个商店模块中：

const模块={
声明：{
所选地点：{}
},
行动：{
fetchPlace（{commit}，params）{
返回新承诺（（解决）=>{
让请求={
placeId:params，
字段：[‘名称’、‘评级’、‘格式化电话号码’、‘几何图形’、‘地点id’、‘网站’、‘评论’、‘用户评级总额’、‘照片’、‘附近地区’、‘价格水平’]
}
let service=new google.maps.places.PlacesService（document.createElement（'div'））
service.getDetails（请求、功能（位置、状态）{
如果（状态=='OK'）{
提交（'SET_SELECTION'，place）
解决（）
}
})
})
},
},
突变：{
设置_选择：（状态，选择）=>{
state.selectedPlace=selection
}
}
}
导出默认模块

在my store.js中：

从“Vue”导入Vue
从“Vuex”导入Vuex
从“./modules/place module”导入placeModule
从“vue2谷歌地图”导入*作为VueLogleMaps
Vue.use（Vuex）
//GMAP
Vue.use（VueLogleMaps{
负载：{
关键字：process.env.VUE_APP_GMAP_关键字，
库：“几何图形、图形、位置”
}
})
导出默认的新Vuex.Store({
模块：{
placeModule:placeModule
}
})

在我的路由器中：

从“../state/store”导入存储
导出默认值[
{
路径：“/”，
姓名：'家'，
组成部分：{
默认值：（）=>导入（'@/components/Home/homefault.vue'）
}
},
{
路径：'/place/：id'，
名称：“PlaceProfile”，
组成部分：{
默认值：（）=>导入（'@/components/PlaceProfile/PlaceProfileDefault.vue'）
},
输入前（到、从、下一个）{
store.dispatch（'fetchPlace'，to.params.id）。然后（（）=>{
if（store.state.placeModule.selectedPlace==未定义）{
下一步（{name:'NotFound'}）
}否则{
下一个（）
}
})
}
}
]

我所尝试的：
-将
新建google.maps.places.PlacesService
更改为
新建window.new google.maps.places.PlacesService
-使用
beforeRouteEnter（）
而不是
beforeEnter（）
作为导航保护
-将
google.maps…
更改为
gmapApi.google.maps…
和
gmapApi.maps…
-向深渊尖叫
-质疑我做过的每一个决定

编辑：我也尝试了wiki中提出的
this.$gmapipPromiseLazy（）
插件添加了一个mixin，提供了
这一功能。$gmapipPromiseLazy
仅用于Vue实例（组件），但您很幸运。。。它还静态地将相同的方法添加到
Vue


Vue.mixin({
创建（）{
此.$gmapipPromiseLazy=gmapipPromiseLazy
}
})
Vue.$GMAPIPPromiseLazy=GMAPIPPromiseLazy

所以，在商店或路由器中，您需要做的就是使用

从“Vue”导入Vue
//剪断。。。
Vue.$gmapipPromiseLazy（）。然后（（）=>{
让服务=新建google.maps.places。。。。
})
你是一个真正的摇滚明星。为了这个，我花了很长时间才把头发拔出来。只是为了确保我理解这个解决方案，并希望能够避免未来的情况（这里完全是新手）。。。这是因为他们在创建的实例上定义了
This.$gmapipPromiseLazy=gmapipPromiseLazy
，对吗？如果没有这个，我就不走运了？@JamesMurray您可能可以使用谷歌api解决这个问题，但这肯定会让它变得更容易