Google Places API 相关答案

【问题标题】：Google Places API corsGoogle Places API 相关
【发布时间】：2017-07-19 08:30:58
【问题描述】：

我正在尝试从我的 localhost 机器发出 get 请求（我的应用程序将保留在 localhost 上）以获取有关某个地方的一些信息。

但是，由于 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 获取访问权限？

我只是在带有 Vue2 和 Vue 资源的 Javascript 中使用简单的 GET 请求：

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

【问题讨论】：

标签： javascript google-maps google-places-api vuejs2

【解决方案1】：

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。

【讨论】：

对我来说同样的问题，使用 Googpe Maps Javascript API 以这种方式解决它： var request = { location: new google.maps.LatLng(lat, lng), // gogle map latLng objet radius: '5000'，类型：['机场'] };让服务 = 新的 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

【解决方案2】：

对我来说同样的问题，用 Google Maps Javascript API 解决了这个问题：不要使用不接受 CORS 的直接 api url，而是使用谷歌地图的 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];
  }
 }
}

【讨论】：

【解决方案3】：

在 Google Maps Platform 上创建一个帐户
打开 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>

参考

Using the Google Maps API with Vue.js

Maps JavaScript API, Hello World

【讨论】：