VueJS, ReferenceError: Google не определен
У меня есть следующий исходный код, и я также получил следующую ошибку, когда пытаюсь создать новую переменную с помощью google.maps ...:
google' is not defined
Во многих ответах говорилось об асинхронной загрузке скрипта API перед всем остальным, и порядок скриптов имеет значение, но я не думаю, что это моя проблема.
PS: я использую это в main.js
Vue.use(VueGoogleMaps, {
load: {
key: 'MY-KEY',
libraries: 'places', //// If you need to use place input
},
})
Может кто-нибудь помочь мне? Спасибо.
<div class = "map-container">
<gmap-map
id = "map"
ref = "map"
:center = "center"
:zoom = "15"
map-type-id = "roadmap"
style = "width:100%; height: 400px;">
<gmap-marker
:key = "index"
v-for = "(m, index) in markers"
:position = "m.position"
@click = "center=m.position"
></gmap-marker>
</gmap-map>
</div>
<script>
import _ from 'lodash'
import { mapState } from 'vuex'
import * as VueGoogleMaps from 'vue2-google-maps'
export default {
computed: {
...mapState([
'map',
]),
mapStyle: function () {
const h = document.body.clientHeight - 80
return 'width: 100%; height: ' + h + 'px'
},
center: function () {
return { lat: 44.837938, lng: -0.579174 }
},
},
mounted: function () {
VueGoogleMaps.loaded.then(() => {
var map = new google.maps.Map(document.getElementById('map'))
}
},
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вы забыли одну скобку:
VueGoogleMaps.loaded.then(() => {
var map = new google.maps.Map(document.getElementById('map'))
})
Скажи мне, если это поможет.
Также из NPM vue2-google-карты,
If you need to gain access to the
<template> <GmapMarker ref = "myMarker" :position = "google && new google.maps.LatLng(1.38, 103.8)" /> </template> <script> import {gmapApi} from 'vue2-google-maps' export default { computed: { google: gmapApi } } </script>
Это не помогает его проблеме. Я опубликовал аналогичный ответ и удалил его, так как он не решил проблему.
Отредактировал мой пост: не хватает одной скобки. У меня это работает в CodeSandbox.
@charlycou да, я использовал ответ "Matthias S", чтобы решить проблему
Поскольку вы импортировали все как VueGoogleMaps, я бы предположил, что google находится внутри этого объекта.
Обновлено: кажется, что объект google называется gmapApi.
Так изменить
var map = new google.maps.Map(document.getElementById('map'))
к
let map = new VueGoogleMaps.gmapApi.maps.Map(document.getElementById('map'))
Поскольку вы ничего не импортируете явно, все должно находиться внутри VueGoogleMaps. Поэтому, если вы хотите, чтобы оно называлось google, добавьте вычисляемое поле, как описано в другом ответе, за исключением того, что gmapApi должно находиться внутри VueGoogleMaps.
Так
computed: {
google: VueGoogleMaps.gmapApi
}
Похоже, вы можете ссылаться на информацию из vue-google-maps. Не похоже, что у vue2-google-maps есть API
Если вы получаете "карты нуля", это означает, что вычисляемое свойство Google еще не готово.
Попробуй это:
computed: {
google: VueGoogleMaps.gmapApi
}
...
Внутри вашего метода ждать gmapApi:
this.$gmapApiPromiseLazy().then(() => {
//your code here
//E.g. for directions
var directionsService = new this.google.maps.DirectionsService();
});
Изучив часть исходного кода, я понял, что плагин не предоставляет API и использует
googleкак глобальный, поэтому он ожидает, что он будет загружен вне библиотеки. Возможно, вы сможете заставить его работать, если используетеwindow.google, но только если эта библиотека загружается отдельно.