Доступ к картам Google в vue js

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

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

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

Ошибка в смонтированном хуке: «ReferenceError: google не определен»

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

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

Мне нужно получить доступ к картам Google, используя этот код. пожалуйста, помогите кто-нибудь.


vue.js vuejs2 vue-directives
person Poovizhi    schedule 16.05.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

У вас тут много чего не так:

  • Ссылка на переменные должна быть сохранена в компоненте данных.
  • Обратные вызовы функций должны использовать функцию жирной стрелки или .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

person Ohgodwhy    schedule 16.05.2019