vuejs 에서 클러스터 사용 중에 에러 사항이 있어 문의 드립니다.
아래 예제를 보고 클러스터를 사용 중이었습니다만 마커만 표시할땐 정상 작동하다 클러스터만 적용하면 문제가 생겨 문의 드립니다.
사용한 데이터는 위 링크에 예제 json인 아래 주소에 json을 그대로 복사하여 사용하였습니다.
https://apis.map.kakao.com/download/web/data/chicken.json
요약
- 마커 사용시엔 줌인 줌 아웃 다 잘됨
- 클러스터 적용시키면
Uncaught TypeError: Cannot read properties of null (reading 'b')에러남 - 클러스터 적용 시 줌 불가
- Method에 initMap 메소드에 this.makeMarkers와 this.makeClusterer 번갈아 가며 주석해서 테스트 가능
서비스키는 지우겠습니다.
// App.vue
<template>
<div id="install-map-page" style="width: 100vw; height:100vh;"></div>
</template>
<script>
import { defineComponent } from 'vue';
import JSONData from '/src/assets/position.json';
export default defineComponent({
name: 'InstallMapPage',
data() {
return {
map: null,
markers: [],
infowindow: null,
}
},
async created() {
await this.getMarkersList();
},
mounted() {
if (window.kakao && window.kakao.maps) {
this.initMap();
} else {
const script = document.createElement("script");
/* global kakao */
script.onload = () => kakao.maps.load(this.initMap);
script.src = `//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=<서비스키>&libraries=services,clusterer`;
document.head.appendChild(script);
}
window.addEventListener('resize', () => {
this.map.relayout();
this.map.setCenter(new kakao.maps.LatLng(36.498687, 127.989102));
});
},
methods: {
initMap() {
const container = document.getElementById("install-map-page");
const options = {
center: new kakao.maps.LatLng(36.2683, 127.6358),
level: 13
};
this.map = new kakao.maps.Map(container, options);
this.map.setMaxLevel(13);
// this.makeClusterer();
this.makeMarkers();
},
makeClusterer() {
new kakao.maps.MarkerClusterer({
map: this.map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: false, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
disableClickZoom: false,
markers: this.makeMarkers()
});
},
makeMarkers() {
const positions = this.markers.map(item => new kakao.maps.LatLng(item.lat, item.lng));
return positions.map(position => {
return new kakao.maps.Marker({
map: this.map,
position,
clickable: true
})
})
},
async getMarkersList() {
this.markers = JSONData.positions;
}
}
})
</script>