Question

我目前从事vue.js项目。该应用程序的目标是检查两个位置之间的距离，然后在地图上显示路线并根据该距离计算运输成本。

我使用Google Directions API，axios来获取请求。

问题在于，由于CORS，获取请求给我一个错误（我在本地运行此应用程序）。我已经尝试了chrome CORS插件，但是问题仍然存在。

error screenshot

您有任何解决方案或只是想知道如何解决此问题？

先谢谢您。

P.S。下面的代码

import axios from 'axios';

const directionsApi = 'https://maps.googleapis.com/maps/api/directions/json?';
const apiKey = '&key=trust_me_the_key_is_valid';

export default {
  name: 'FirstForm',
  data() {
    return {
      fromValue: '',
      toValue: '',
      distance: '',
    };
  },
  methods: {
    handleFromToInput: function () {
      const fromTo = `origin=${this.fromValue}&destination=${this.toValue}`;
      axios.get(`${directionsApi}${fromTo}${apiKey}`)
        .then((response) => {
          // this.distance = response.routes[0].legs[0].distance.text;
          console.log(response.routes[0].legs[0].distance.text);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};

Answer 1

Similar here

如果使用Javascript API方式，

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

引用

Using the Google Maps API with Vue.js

Maps JavaScript API, Hello World

Answer 2

我找到了解决方案。也许这不是最好的方法，但是可以。

我使用了cors-wherewhere代理。

https://cors-anywhere.herokuapp.com/${directionsApi}${fromTo}${apiKey}

CORS问题。 Google Directions API GET请求| vue.js

2 个答案: