VueJS, ReferenceError: google is not defined

Question

我有以下源代码，当我尝试用 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'))    
        }
      },

Answer 1

您忘记了一个括号：

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

告诉我这是否有帮助。

也来自 NPM vue2-google-maps、

If you need to gain access to the google object:

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

Answer 2

由于您已将所有内容导入为 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
}

Answer 3

如果你得到“maps of null”，这意味着 google computed 属性还没有准备好。

试试这个：

computed: {
    google: VueGoogleMaps.gmapApi
}
...

在您等待 gmapApi 的方法中：

this.$gmapApiPromiseLazy().then(() => {
  //your code here
  //E.g. for directions
  var directionsService = new this.google.maps.DirectionsService();
});

VueJS, ReferenceError: google is not defined

VueJS, ReferenceError: google is not defined

javascript

google-maps

vue.js

vuejs2

vue2-google-maps