Ошибка ссылки Google после установки vue-google-autocomplete - PullRequest
Новая
       7

Ошибка ссылки Google после установки vue-google-autocomplete

0 голосов
/ 01 июня 2018

Я использую vue.js и Laravel 5.6.12

Я просматриваю эту страницу github для установки автозаполнения Google vue.js.

Ниже приведены пошаговые инструкции, которым я следовал. 

npm install vue-google-autocomplete --save

Затем добавили нижеприведенный код в app.js 

import VueGoogleAutocomplete from 'vue-google-autocomplete'
Vue.component('vue-google-autocomplete', VueGoogleAutocomplete);

Наконец ниже код в шаблоне. 

<vue-google-autocomplete
    id="map"
    classname="form-control"
    placeholder="Start typing">
</vue-google-autocomplete>

Я получил ошибку ниже

Ошибка в подключенном хуке: «ReferenceError: Google не определен»

enter image description here

Я что-то упустил в коде выше?

1 Ответ

0 голосов
/ 01 июня 2018

Похоже, вы не добавили скрипт Google Maps в свой index.html.

Этот компонент (Vue Google Autocomplete) использует Google Maps Places API для получения гео-подсказок для автозаполнения, поэтому Вы должны включить API Google Maps Places API в свой HTML-код: 

<!DOCTYPE html>
  <html>
  <head>
    …
    <!-- NEXT LINE IS SUPER IMPORTANT -->
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=places"></script>
  </head>
  <body>
    …
  </body>
</html>

Если вы используете vue cli, вы можете добавить его в этот файл: https://github.com/vuejs-templates/webpack/blob/develop/template/index.html

КСТАТИ: Вы также можете найти этот скрипт на странице примера. View-source: https://olefirenko.github.io/vue-google-autocomplete/ (проверьте исходный код страницы)

Выполните следующие шаги, чтобы получитьКлюч API :

  • Перейдите в консоль API Google.
  • Создайте или выберите проект.
  • Нажмите Продолжить, чтобы включить API и все связанные службы.
  • На странице Credentials получите ключ API.Примечание. Если у вас есть неограниченный ключ API или ключ с ограничениями браузера, вы можете использовать этот ключ.
  • В диалоговом окне, отображающем ключ API, выберите Ограничить ключ, чтобы установить ограничение браузера для ключа API..
  • В разделе «Ограничение ключа» выберите HTTP-рефереры (веб-сайты), затем следуйте инструкциям на экране для установки рефереров.
  • (Необязательно) Включите биллинг.См. Ограничения использования для получения дополнительной информации.

Подробнее о получении ключа API здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...