Javascript 谷歌放置API cors

我正试图从我的本地主机（我的应用程序将留在本地主机上）执行get请求，以获取有关某个地方的信息

但是，由于CORS（

XMLHttpRequest无法加载），Google Places API和/或我的Chrome不允许我执行此请求https://maps.googleapis.com/maps/api/place/details/json?placeid=[placeid]&键=[key].请求的资源上不存在“访问控制允许来源”标头。来源'http://localhost:8080因此，不允许访问。

）

有没有办法（没有CORS Chrome插件）从Google Places API获得访问权限

我只是在Javascript和Vue2&Vue资源中使用了一个简单的GET请求：

this.$http.get(`https://maps.googleapis.com/maps/api/place/details/json?placeid=${googleplacesPlace}&key=${googleplacesToken}`).then(response => {
})

---

您可以使用此选项绕过cors。

对于我来说，同样的问题，通过Google Maps Javascript API解决了它：与不接受cors的直接API url不同，使用Google map的instene（新的Google.Maps.places…）

var请求={
位置：new google.maps.LatLng（lat，lng），//gogle map LatLng对象
半径：'5000'，
类型：[“机场”]
};
让service=newgoogle.maps.places.PlacesService（this.map）；
service.nearbySearch（请求，this.Fncallback）；
}
Fncallback（结果、状态）{
if（status==google.maps.places.PlacesServiceStatus.OK）{
对于（var i=0；i

在谷歌地图平台上创建一个帐户

OpenVue项目

制作一个js文件（src/utils/gmap.js）

在视图js中（src/views/MyMap.vue）

我的地图
从“@/utils/gmaps”导入gmapsInit；
导出默认值{
名称：“myMap”，
组成部分：{
},
数据（）{
返回{
}
},
计算：{
},
异步装入（）{
试一试{
const google=wait gmapsInit（）；
var map=new google.maps.map（document.getElementById（'map'）{
中心：{纬度：-34.397，液化天然气：150.644}，
缩放：8
});
}捕获（错误）{
控制台错误（error）；
}
},
方法：{
}
}
#地图{
宽度：400px；
高度：400px；
}

参考

---

对于我来说，同样的问题，用Googpe Maps Javascript API解决：var request={location:new google.Maps.LatLng（lat，lng），//gogle map LatLng对象半径：'5000'，类型：['airport']}；让service=newgoogle.maps.places.PlacesService（this.map）；service.nearbySearch（请求，this.Fncallback）；}Fncallback（results，status）{if（status==google.maps.places.PlacesServiceStatus.OK）{for（var i=0；iconst 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

 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];
  }
 }
}

// 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;
}

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