Доступ к Google Maps в VUE JS - PullRequest
Новая
       40

Доступ к Google Maps в VUE JS

0 голосов
/ 16 мая 2019

Вот ссылка, которую я использовал для отображения карт Google:

https://jsfiddle.net/oscar11/1krtvcfj/2/

При попытке доступа к картам с помощью этого кода отображается следующая ошибка:

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

Как кто-то предложил в другой ссылке, я даже инициализировал 4 параметра, таких как 

geocoder: null,
map: null,
marker: null,
infowindow: null

Мне нужен доступ к картам Google с помощью этого кода. пожалуйста, помогите.

1 Ответ

0 голосов
/ 16 мая 2019

Вы ошибаетесь во многих вещах:

  • В компоненте данных должна поддерживаться ссылка на переменные.
  • В функциях обратного вызова должна использоваться функция жирной стрелки или .bind(this)(среди других вариантов), чтобы поддержать область.Это изменит function () { на () => {.В противном случае область действия this в рамках этих анонимных обратных вызовов не будет экземпляром Vue.
  • Сама карта должна быть частью шаблона Vue.
  • На входе address должна использоваться привязка v-model, предоставляемая Vue, для синхронизации данных с компонентом
  • Служба geocoder не будет работать без ключа API.
  • База div в вашем компоненте также должна иметь фиксированную высоту или, по крайней мере, высоту 100%, чтобы карта отображалась правильно.
  • Хотя вы можете использовать document.getElementById(), Я бы предложил использовать ref для сохранения ссылки на элемент, добавив ref="map_canvas" к элементу и затем вместо него использовать this.$refs.map_canvas.

Кажется, что вы только что скопировалии вставил некоторый код в компонент Vue и надеялся, что он сработает.Не будетЯ исправил это для вас, но я бы рекомендовал обратить пристальное внимание на различия, чтобы вы могли понять, как они объединяются.

Вот ваш обновленный jsFiddle

...