首页 > 解决方案 > VueJS,ReferenceError:谷歌未定义

问题描述

我有以下源代码,当我尝试使用以下方法实例化一个新 var 时,我也遇到了以下错误google.maps ...

谷歌'未定义

许多答案都谈到了在其他所有事情之前异步加载 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'))    
        }
      }, 

标签: javascriptgoogle-mapsvue.jsvuejs2vue2-google-maps

解决方案


正如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
}

推荐阅读