Question

Я использую vue интерфейс для своего приложения, у меня есть vue - google-maps для отображения карт и vue -google-places для поиска места, я хочу получить сведения о месте с помощью placeId, нет из вышеуказанного пакета поддерживают это. Я попытался отправить запрос на api карт Google, я могу делать запросы от почтальона или вставляя ссылку в браузере, я получаю данные в ответ, но когда я делаю запрос из внешнего интерфейса, он дает мне ошибку CORS. поиск inte rnet я нашел этот вопрос StackOverflow Google Maps API: на запрошенном ресурсе отсутствует заголовок 'Access-Control-Allow-Origin' он предполагает, что API карт Google предназначен только для стороны сервера, чтение Документация по API карт Google для js Я обнаружил, что у них есть sdk, но он должен быть включен как тег скрипта для работы с внешним интерфейсом. У меня вопрос, как это сделать в Vue, включая такие этапы сценария в vue было бы беспорядочно, не так ли? есть ли какой-либо пакет npm, который может помочь, любая ссылка или пример приветствуются.

LHJ · Answer 1 · 20 июня 2020

1. используйте эту библиотеку https://github.com/xkjyeah/vue-google-maps

npm install vue2- google-maps

или

yarn add vue2- google-maps

// somewhere u initialize main Vue app instance or install vue plugin, maybe in main.js
import Vue from 'vue';
import * as VueGoogleMaps from 'vue2-google-maps';

Vue.use(VueGoogleMaps, {
  load: {
    key: 'YOUR_API_KEY',
    libraries: '', // google map library u want to use
  },
  installComponents: true
});

import Vue from 'vue';
import {gmapApi} from 'vue2-google-maps';

export default class SomeComponent extends Vue {
  computed: {
    google: gmapApi,
  },
  data() {
    return {
      placeId: '',
      geocoder: null
    }
  }
  mounted() {
    this.$gmapApiPromiseLazy().then(() => {
      if(this.google) {
        this.geocoder = new this.google.maps.Geocoder();
      }
    });
  },
  methods: {
    geocode() {
      this.geocoder.geocode({placeId: this.placeId}, (results, status) => {
        console.log(results,status);
      })
    }
  }
}

после некоторых исследований документации карты Google, для поиска по placeId вы, скорее всего, будете использовать геокодер

https://developers.google.com/maps/documentation/javascript/reference/geocoder

https://developers.google.com/maps/documentation/javascript/examples/geocoding-place-id

2. rest api https://developers.google.com/maps/documentation/geocoding/intro#place -id

должно быть примерно так:

https://maps.googleapis.com/maps/api/geocode/json?place_id=ChIJd8BlQ2BZwokRAFUEcm_qrcA&key=YOUR_API_KEY