Google Places API cors
Google Places API cors
提问于 2017-07-19 16:30:59
我正在尝试从我的本地主机上执行get请求(我的应用程序将留在本地主机上)，以获取有关某个地点的一些信息。
然而，由于CORS (XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/place/details/json?placeid=[placeid]&key=[key]. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.)的原因，Google Places API和/或我的Chrome不允许我这样做。
有什么方法(没有CORS Chrome插件)可以访问Google Places API吗？
我只是在Javascript中使用一个简单的GET请求和Vue2 & Vue Resource：
this.$http.get(`https://maps.googleapis.com/maps/api/place/details/json?placeid=${googleplacesPlace}&key=${googleplacesToken}`).then(response => {
})回答 3
Stack Overflow用户
发布于 2017-07-19 16:59:39
const PROXY_URL = 'https://cors-anywhere.herokuapp.com/';
const TARGET_URL = 'https://maps.googleapis.com/maps/api/place/autocomplete/json?&key=KEY'
const URL = PROXY_URL + TARGET_URL您可以使用它来绕过cors。
Stack Overflow用户
发布于 2017-08-28 19:59:54
我也遇到了同样的问题，用Google Maps Javascript API这样解决了这个问题:用不接受CORS的直接api代替，使用google map的instene (新的google.maps.places...)
var request = {
location: new google.maps.LatLng(lat, lng), // gogle map latLng objet
radius: '5000',
types: ['airport']
};
let service = new google.maps.places.PlacesService(this.map);
service.nearbySearch(request, this.Fncallback);
}
Fncallback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
}
}
}Stack Overflow用户
发布于 2019-04-20 09:41:04
- 在谷歌地图平台上创建帐户
- Open Vue项目
- 创建js文件(src/utils/gmap.js)
// src/utils/gmaps.js
const API_KEY = 'XXXXXYOURAPIKEYXXXX';
const CALLBACK_NAME = 'gmapsCallback';
let initialized = !!window.google;
let resolveInitPromise;
let rejectInitPromise;
const initPromise = new Promise((resolve, reject) => {
resolveInitPromise = resolve;
rejectInitPromise = reject;
});
export default function init() {
if (initialized) return initPromise;
initialized = true;
window[CALLBACK_NAME] = () => resolveInitPromise(window.google);
const script = document.createElement('script');
script.async = true;
script.defer = true;
script.src = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}&callback=${CALLBACK_NAME}`;
script.onerror = rejectInitPromise;
document.querySelector('head').appendChild(script);
return initPromise;
}视图js (src/views/MyMap.vue)中的
<template>
<div class="my-map">
My Map
<div id="map"></div>
</div>
</template>
<script>
import gmapsInit from '@/utils/gmaps';
export default {
name: 'myMap',
components: {
},
data () {
return {
}
},
computed: {
},
async mounted() {
try {
const google = await gmapsInit();
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
} catch (error) {
console.error(error);
}
},
methods:{
}
}
</script>
<style>
#map{
width:400px;
height:400px;
}
</style>参考打开
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45185061
复制相关文章
相似问题
腾讯云开发者
