VueJS, ReferenceError: Google не определен - PullRequest
Новая
       39

VueJS, ReferenceError: Google не определен

0 голосов
/ 21 февраля 2019

У меня есть следующий исходный код, и я также получаю следующую ошибку при попытке создать новую переменную с google.maps ...:

google 'не определено

Во многих ответах говорилось о асинхронной загрузке сценария 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'))    
        }
      },

Ответы [ 2 ]

0 голосов
/ 21 февраля 2019

Поскольку вы импортировали все как 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
}
0 голосов
/ 21 февраля 2019

Вы забыли одну скобку: 

VueGoogleMaps.loaded.then(() => {
           var map = new google.maps.Map(document.getElementById('map'))    
        })

Скажите, поможет ли это.

Также из NPM vue2-google-maps ,

Если вам нужно получить доступ к объекту google: 

<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>
...