Google Places API核心

Question

我正在嘗試從本地計算機上獲取請求（我的應用程序將保留在本地計算機上）以獲取有關某個地點的信息。

但是，由於CORS，Google Places API和/或我的Chrome不允許我執行此請求（ 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. 。

是否可以通過某種方式（沒有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 => {
})

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

Answer 2

對我來說，同樣的問題，可以通過Google Maps Javascript API來解決：代替使用直接api網址不接受CORS，請使用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];
  }
 }
}

Answer 3

1. 在Google Maps Platform上創建一個帳戶
2. 公開Vue項目
3. 制作一個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;
}

4. 在視圖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>

參考

將Google Maps API與Vue.js結合使用

Maps JavaScript API，Hello World