현재 리액트 네이티브로 카카오지도를 webview(html형식)으로 보여주고 있습니다
사용자의 현 좌표을 기준으로 주변에 등록된 부동산을 마커로 보여주는데 기본 지도 레벨4이며 8레벨부터 cluster 및 마커를 이용하려고 합니다.
문의 내용은 이런 상황일때 문제가 발생합니다.
사용자의 현 위치가 강남 터미널이라고 한다면
강남 터미널 주변의 부동산을 보여주는 데 만약 지도를 이동하여 부산까지 이동 되었을 때는 새로운 데이터가 들어오는것 까지는 확인했지만 지도상에 마커 및 클러스터가 되지 않습니다.
1차적으로 가져온 강남 터미널 주변의 부동산만 마커 표시 및 클러스터가 적용되어있습니다.
시도 해본 코드
displayPlaces 함수에 clusterer.clear(); 를 사용 해봤지만 아무런 소용이 없습니다.
어떻게 해야 될까요?
이전에 생성한 clusterer 객체를 clear 한 게 맞으실까요?
마커 클러스터에 추가한 모든 마커를 clear 한 후 새 데이터로 마커를 생성하고
clusterer.addMarkers(markers);를 하면 클러스터에 새로운 정보가 추가할 수 있습니다.
마커 클러스터러 사용하기 - Kakao 지도 Web API 예제 페이지에서 개발자 도구를 열고
콘솔에 아래 명령을 차례대로 실행시켜 보면
클러스터에 포함되었던 마커가 삭제되고 새로운 데이터로 추가되는 것을 확인하실 수 있습니다.
위 내용 참고해 주시고 코드에 디버깅을 걸어서 사용하고 있는 클러스터러, 데이터 정보들도 함께 확인 부탁드립니다.
추가 문의하실 경우 현상 확인이 가능한 html 코드도 첨부 부탁드립니다.
// 1. 클러스터 내 마커 삭제
clusterer.clear();
//2. 새로 추가된 정보로 마커 생성 및 클러스터러에 마커 추가
var positions = [
{
title: '카카오',
latlng: new kakao.maps.LatLng(33.450705, 126.570677)
},
{
title: '생태연못',
latlng: new kakao.maps.LatLng(33.450936, 126.569477)
},
{
title: '텃밭',
latlng: new kakao.maps.LatLng(33.450879, 126.569940)
},
{
title: '근린공원',
latlng: new kakao.maps.LatLng(33.451393, 126.570738)
}
];
clusterer.addMarkers(positions.map(i => (new kakao.maps.Marker({position : i.latlng}))));
html =`
.wrap {position: absolute;left: 0;bottom: 40px;width: 288px;height: 132px;margin-left: -144px;text-align: left;overflow: hidden;font-size: 12px;font-family: ‘Malgun Gothic’, dotum, ‘돋움’, sans-serif;line-height: 1.5;}
.wrap * {padding: 0;margin: 0;}
.wrap .info {width: 286px;height: 120px;border-radius: 5px;border-bottom: 2px solid #ccc;border-right: 1px solid #ccc;overflow: hidden;background: #fff;}
.wrap .info:nth-child(1) {border: 0;box-shadow: 0px 1px 2px #888;}
.info .title {padding: 5px 0 0 10px;height: 30px;background: #eee;border-bottom: 1px solid #ddd;font-size: 18px;font-weight: bold;}
.info .close {position: absolute;top: 10px;right: 10px;color: #888;width: 17px;height: 17px;background: url(‘https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png’);}
.info .close:hover {cursor: pointer;}
.info .body {position: relative;overflow: hidden;}
.info .desc {position: relative;margin: 13px 0 0 90px;height: 75px;}
.desc .ellipsis {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.desc .jibun {font-size: 11px;color: #888;margin-top: -2px;}
.info .img {position: absolute;top: 6px;left: 5px;width: 73px;height: 71px;border: 1px solid #ddd;color: #888;overflow: hidden;}
.info:after {content: ‘’;position: absolute;margin-left: -12px;left: 50%;bottom: 0;width: 22px;height: 12px;background: url(‘https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png’)}
.info .link {color: #5085BB;}
<script>
var map = new kakao.maps.Map(document.getElementById('map'), { // 지도를 표시할 div
center : new kakao.maps.LatLng(${mainLat}, ${mainLng}), // 지도의 중심좌표
level : 4 // 지도의 확대 레벨
});
var customOverlay;
var clusterer = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 8 // 클러스터 할 최소 지도 레벨
});
function getLengthByLevel(level) {
switch(level){
case 1: return 10;
case 2: return 20;
case 3: return 30;
case 4: return 50;
case 5: return 100;
case 6: return 250;
case 7: return 500;
case 8: return 1000;
case 9: return 2000;
case 10: return 4000;
case 11: return 8000;
case 12: return 16000;
case 13: return 32000;
case 14: return 64000;
}
}
function getSwNe(){
var proj = map.getProjection();
var center = map.getCenter();
var mapLevel = map.getLevel();
var len =getLengthByLevel(mapLevel);
var centerPoint = proj.pointFromCoords(center);
var scale = 1 / Math.pow(2, mapLevel - 3);
var pixelForHalfLen = len / 2 * scale;
var swPoint = new kakao.maps.Point(centerPoint.x - pixelForHalfLen, centerPoint.y + pixelForHalfLen);
var nePoint = new kakao.maps.Point(centerPoint.x + pixelForHalfLen, centerPoint.y - pixelForHalfLen);
var sw = proj.coordsFromPoint(swPoint);
var ne = proj.coordsFromPoint(nePoint);
// const poinData = {
// sw:{
// lat:sw.getLat(),
// lng:sw.getLng()
// },
// ne : {
// lat:ne.getLat(),
// lng:ne.getLng()
// },
// level: mapLevel,
// };
const poinData = {
lat:center.getLat(),
lng:center.getLng(),
level:mapLevel
}
window.ReactNativeWebView.postMessage(JSON.stringify(poinData));
};
function contractTypes(item){
}
// 데이터를 가져오기 위해 jQuery를 사용합니다
// 데이터를 가져와 마커를 생성하고 클러스터러 객체에 넘겨줍니다
// 마커 클러스터러를 생성합니다
kakao.maps.event.addListener(map, 'idle', function(){
// if(clusterer.markers.length > 0 ){
// // clusterer.clear();
// // cluterer.redraw();
// }
getSwNe();
});
function displayPlaces(data){
// if(clusterer.markers.length > 0 ){
clusterer.clear();
// // cluterer.redraw();r
// }
var markers = data.map(function(i, position) {
var title = i.title;
var imgs = i.propertiesPictures;
var address1 = i.address1;
var address2 = i.address2;
var propertyImage = 'http:localhost:3001/' + i.propertiesPictures[0].picture;
var contract = i.contractTypes[0].contractTypeName.kr;
var money = contract === '월세' ? i.deposit + '/' + i.monthly: i.deposit;
var content = '<div class="wrap">' +
' <div class="info">' +
' <div class="title">' + title +
' ' +
' <div class="close" onclick="closeOverlay()" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img src=' + propertyImage +' width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis">' + address1 + address2 +'</div>' +
' <div class="jibun ellipsis">' + contract +' '+ money + '</div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>';
var marker = new kakao.maps.Marker({
position : new kakao.maps.LatLng(i.lat, i.lng),
clickable: true
});
customOverlay = new kakao.maps.CustomOverlay({
position: marker.getPosition(),
content: content,
// map:map
});
kakao.maps.event.addListener(marker, 'click', function(){
customOverlay.setMap(map);
});
return marker;
});
// 클러스터러에 마커들을 추가합니다
clusterer.addMarkers(markers);
};
function closeOverlay(){
customOverlay.setMap(null);
}
</script>
</body>
</html>
첨부된 코드에는 displayPlaces를 호출하는 부분이 없어서 동작을 확인하기 위해 샘플 데이터로 displayPlaces를 실행한 후
다른 샘플 데이터로 다시 호출해 보았더니 클러스터에 이전에 등록된 마커가 삭제되고 새로운 마커로 클러스터가 표시되는 것을 확인했습니다.
코드에는 별다른 문제가 없는 것으로 보이는데요.
리액트 네이티브에서 해당 로직이 정상적으로 실행되었는지 확인하고,
실행되었음에도 클러스터와 마커가 보이지 않는다면 디버깅으로 displayPlaces에서 사용하는 마커 클러스터, 마커 객체, 데이터 정보를 확인해 주세요.