반응형
유형 오류 가져오기: 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
반응형
'programing' 카테고리의 다른 글
jQuery 및 Ajax와 함께 기본 인증 사용 (0) | 2022.10.31 |
---|---|
mysql 날짜 업데이트(슬래시 포함) (0) | 2022.10.31 |
MySQL 열 ENUM 값 변경 (0) | 2022.10.21 |
Vuex - API 호출 전후에 상태 변경을 커밋하시겠습니까? (0) | 2022.10.21 |
jQuery를 사용하여 입력에 포커스가 있는지 테스트 (0) | 2022.10.21 |