VueJs, ReferenceError: google이 정의되지 않았습니다.

VueJs, ReferenceError: google이 정의되지 않았습니다.

다음과 같은 소스 코드가 있으며 새로운 var를 인스턴스화하려고 할 때 다음과 같은 오류가 발생하였습니다.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'))    
        }
      }, 

모든 것을 Import했으므로VueGoogleMaps라고 생각됩니다google이 오브젝트 안에 있습니다.

편집: 그런 것 같습니다.google오브젝트가 호출됩니다.gmapApi.

그래서 변화

var map = new google.maps.Map(document.getElementById('map'))   

로.

let map = new VueGoogleMaps.gmapApi.maps.Map(document.getElementById('map'))   

명시적으로 아무것도 Import하지 않기 때문에 모두 다음 범위 내에 있어야 합니다.VueGoogleMaps그래서 만약 당신이 전화하기를 원한다면google, 다른 회답에 기재되어 있는 계산필드를 추가합니다.단,gmapApi안에 있어야 한다VueGoogleMaps.

그렇게

computed: {
    google: VueGoogleMaps.gmapApi
}

괄호 하나를 잊어버렸습니다.

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>

"maps of null"이 표시되면 Google 계산 속성이 아직 준비되지 않은 것입니다.

이것을 시험해 보세요.

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

gmapApi를 대기하는 메서드 내부:

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

언급URL : https://stackoverflow.com/questions/54803405/vuejs-referenceerror-google-is-not-defined