如何在 vue 前端获取地点 ID 的谷歌地点详细信息?

Question

我正在为我的应用程序使用 vue 前端，我有 vue-google-maps 来显示地图，和 vue-google-places 用于搜索地点，我想使用 placeId 获取地点详细信息，以上软件包都不支持这个。我尝试向谷歌地图 api 发送请求，我可以从邮递员发出请求，或者通过在浏览器中粘贴链接来获取数据作为响应，但是当我从前端发出请求时，它会给我 CORS 错误。 搜索互联网我发现了这个堆栈溢出问题 Google Maps API：请求的资源上不存在"访问控制允许来源"标头 它建议谷歌地图API仅适用于服务器端，阅读谷歌地图API的JS文档，我发现他们有SDK，但需要作为脚本标签包含在前端。 我的问题是如何在 Vue 中做到这一点，在 vue 中包含这样的脚本阶段会很混乱吧？ 是否有任何 npm 包可能会有所帮助，任何参考或示例都值得赞赏。

Answer 1

1. 使用此库 https://github.com/xkjyeah/vue-google-maps

npm 安装 vue2-google-maps

或

纱线添加 vue2-谷歌地图

// somewhere u initialize main Vue app instance or install vue plugin, maybe in main.js
import Vue from 'vue';
import * as VueGoogleMaps from 'vue2-google-maps';
Vue.use(VueGoogleMaps, {
load: {
key: 'YOUR_API_KEY',
libraries: '', // google map library u want to use
},
installComponents: true
});

import Vue from 'vue';
import {gmapApi} from 'vue2-google-maps';
export default class SomeComponent extends Vue {
computed: {
google: gmapApi,
},
data() {
return {
placeId: '',
geocoder: null
}
}
mounted() {
this.$gmapApiPromiseLazy().then(() => {
if(this.google) {
this.geocoder = new this.google.maps.Geocoder();
}
});
},
methods: {
geocode() {
this.geocoder.geocode({placeId: this.placeId}, (results, status) => {
console.log(results,status);
})
}
}
}

经过对谷歌地图文档的一些研究，要按placeId搜索，你更有可能使用地理编码器

https://developers.google.com/maps/documentation/javascript/reference/geocoder

https://developers.google.com/maps/documentation/javascript/examples/geocoding-place-id

<小时 />

2. 休息 API https://developers.google.com/maps/documentation/geocoding/intro#place-id

应该是这样的：

https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJd8BlQ2BZwokRAFUEcm_qrcA&key=YOUR_API_KEY