programing

유형 오류 가져오기: Vue GoogleMapApiLoader를 사용할 때 순환 구조를 JSON으로 변환하는 중

copysource 2022. 10. 21. 22:33
반응형

유형 오류 가져오기: Vue GoogleMapApiLoader를 사용할 때 순환 구조를 JSON으로 변환하는 중


    vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Converting circular structure to JSON
        --> starting at object with constructor 'ni'
        |     property 'gm_bindings_' -> object with constructor 'Object'
        |     property 'controlSize' -> object with constructor 'Object'
        |     ...
        |     property 'controlSize' -> object with constructor 'Object'
        --- property 'qe' closes the circle"

    found in

    ---> <GoogleMapLoader> at src/components/GoogleMapLoader.vue
           <TravelMap> at src/components/TravelMap.vue
             <VContent>
               <VApp>
                 <App> at src/App.vue
                   <Root>

여기서 무슨 일이 일어나고 있는지 잘 모르겠어.Google Maps Api Loader를 사용하여 구글 맵의 래퍼를 작성하려고 합니다만, 현재로서는 페이지에 아무것도 표시되지 않고, 콘솔 로그에 이렇게 기록되어 있습니다.

이것은 에러로, 패키지에서 발생하고 있는 것 같습니다만, 제 코드가 맞는지 잘 모르겠습니다.

제가 찾을 수 있는 자료가 많지 않아서 도움이 될 것 같습니다.


    <template>
      <div>
        <div class='google-maps' ref='googleMap'></div>
        <template v-if='Boolean(this.google) && Boolean(this.map)'>
          <slot
            :google='google'
            :map='map'
          />
        </template>
        {{ this.$data }}
      </div>
    </template>

    <script>
    import GoogleMapApiLoader from 'google-maps-api-loader';

    export default {
      name: 'GoogleMapLoader',
      props: {
        mapConfig: Object,
        apiKey: String,
      },
      data() {
        return {
          google: null,
          map: null,
        };
      },
      async mounted() {
        const googleMapApi = await GoogleMapApiLoader({
          apiKey: this.apiKey,
        });
        this.google = googleMapApi;
        this.initializeMap();
      },
      methods: {
        initializeMap() {
          const mapContainer = this.$refs.googleMap;
          this.map = new this.google.maps.Map(
            mapContainer, this.mapConfig,
          );
        },
      },
    };
    </script>

    <style>
    </style>

언급URL : https://stackoverflow.com/questions/62229373/getting-typeerror-converting-circular-structure-to-json-when-using-vue-googlema

반응형