안녕하세요.
vue에서 카카오맵 api를 테스트 해보던 중 문제가 생겨서 질문드립니다. 해당 예제를 따라하는 데에 https://github.com/okchangwon/vue-daum-map 의 라이브러리를 사용했습니다.
-
클러스터 예제를 그대로 따라서(데이터만 다른 json 파일을 만들어서 썼습니다.) 했는데, 클러스터가 화면에 표시는 되지만 에러가 1개 뜹니다. (저 클러스터를 화면에서 확인한 이후에는 맵을 움직일 수 없고 휠로 확대/축소만 됩니다.)
-
거기서 휠을 돌려서 확대를 하면 아래와 같이 무언가를 찾을 수 없다고 에러가 계속해서 뜹니다.
주소의 위도와 경도를 가지고 따로 마커를 띄우는 건 문제 없이 되는데 마커 클러스터를 띄우려고 하니 이런 오류가 발생하네요. 참고하실 수 있도록 해당 컴포넌트의 코드와 json 코드를 첨부합니다.
(아래 코드에서 json 데이터는 console.log()로 찍어보니 데이터가 잘 나오는 것까진 확인했습니다.)
// Home.vue
<template>
<div class="home">
<vue-daum-map
:appKey="appKey"
:center="center"
:level="level"
:mapTypeId="mapTypeId"
:libraries="libraries"
@load="onLoad"
style="width:500px;height:400px;"
/>
</div>
</template>
<script>
import VueDaumMap from 'vue-daum-map';
export default {
name: 'Home',
components: {
VueDaumMap,
},
data: () => ({
appKey: process.env.VUE_APP_KAKAO_API_KEY,
center: { lat: 33.450701, lng: 126.570667 },
level: 3,
mapTypeId: VueDaumMap.MapTypeId.NORMAL,
libraries: ['services', 'clusterer', 'drawing'],
map: null,
}),
methods: {
onLoad(map) {
this.map = map;
const addressData = require('@/address.json');
this.setMarkerClusterer(addressData);
},
setMarkerClusterer(data) {
let clusterer = new window.kakao.maps.MarkerClusterer({
map: this.map,
averageCenter: true,
minLevel: 10,
});
let markers = data.map(
d =>
new window.kakao.maps.Marker({
position: new window.kakao.maps.LatLng(d.latitude, d.longitude),
}),
);
clusterer.addMarkers(markers);
},
},
};
</script>
// address.json
[
{
"name": "테스트",
"address": "서울 강남구 역삼로 165",
"latitude": 37.4954107018262,
"longitude": 127.03716802144
},
{
"name": "와쿠와쿠PC방 (test)",
"address": "서울 강남구 역삼로 149",
"latitude": 37.4948954901706,
"longitude": 127.035461246887
},
{
"name": "섬데이PC방 (test)",
"address": "서울 강남구 논현로 79길 69",
"latitude": 37.4958220624121,
"longitude": 127.033375863236
},
{
"name": "bom PC방 (test)",
"address": "서울 강남구 논현로79길 62",
"latitude": 37.4962758238801,
"longitude": 127.033957316936
}
]
내용 추가: 저 상태에서 클러스터를 클릭하면 확대되고 화면이 잘 나오긴 하는데 드래그하여 맵의 다른 부분으로 이동하려고 하면 화면이 로딩이 안되면서 2번과 같이 에러가 무수하게 많이 나오네요
