[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610
vue2에서 kakao map을 컴포넌트로 만들고
필요한 컴포넌트에서 하위로 등록해서 사용하고자 하는데
<div id="map">
<the-map ref="map"></the-map>
</div>
created() {
this.loadMapComponent(); // the-map 컴포넌트 로드
},
mounted() {
this.loadData(); // 데이터 로드 및 지도 작업 실행
},
methods: {
loadMapComponent() {
import("@/components/trip/map/TheMap.vue").then((module) => {
this.$options.components.TheMap = module.default || module; // the-map 컴포넌트를 동적으로 등록
this.mapLoaded = true; // the-map 로드 완료
});
},
loadData() {
http
.get(`/plan/detail/${this.$route.params.tripPlanId}`)
.then((response) => {
this.detailList = response.data;
this.title = this.detailList[0].planTitle;
console.log(this.mapLoaded);
})
.finally(() => {
this.$refs.map.drawLine(this.detailList);
this.$refs.map.displayMarker(this.detailList);
});
},
},
위와 같이 the-map을 통해서 불러오면 지도가 화면에 잘 표시 됩니다.
이후 비동기로 mounted에서 데이터를 불러와서 the-map에 있는 drawLine()이라는 메소드를 실행해서 마커를 표시하고 선을 그리려고 하는데 데이터까지는 잘 불러와지는데 이후에 drawLine 메소드를 실행하는 과정에서 kakao is not defined가 뜹니다. 이 부분을 해결할 수 있는 방법이 있을까요?