제목처럼 검색 후 휠업,다운을 하면 전에 있던 지도가 살짝살짝보입니다. clusterer.clear()를 어느시점해서 해야할지모르겠습니다…
function marker(data) {
var list = data.latLonlist;
var mapContainer = document.getElementById(‘map’), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(36.06682, 126.97865), // 지도의 중심좌표
level: 13, // 지도의 확대 레벨
mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
};
// 지도 생성
var map = new kakao.maps.Map(mapContainer, mapOption);
// 클러스터 생성
var clusterer = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 10, // 클러스터 할 최소 지도 레벨
disableClickZoom : true
});
// 주소-좌표 변환 객체를 생성
var geocoder = new daum.maps.services.Geocoder();
// 좌표 검색 후 반환
for(var i=0; i<=list.length-1;i++){
var company_name = list[i].company_name;
var device_name = list[i].device_name;
var device_model = list[i].device_model;
var serial_no = list[i].serial_no;
var address = list[i].address;
getLatLon(company_name,device_name,device_model,serial_no,address);
}
// 주소-좌표 변환
function getLatLon(company_name,device_name,device_model,serial_no,address){
geocoder.addressSearch(address, function(result) {
// 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
var locPosition = new kakao.maps.LatLng(result[0].y, result[0].x)
var lat = result[0].y
var lon = result[0].x,
message = '<div class="wrap" id="'+serial_no+'">' +
' <div class="info">' +
' <div class="title">' +
company_name +
' <div class="close" onclick="this.parentElement.parentElement.parentElement.style.display=`none`" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="ellipsis">'+address+'</div>' +
' <div class="jibun ellipsis">장치명 : '+device_name+'</div>' +
' <div class="jibun ellipsis">모델명 : '+device_model+' / 일련번호 : '+serial_no+'</div>' +
' <a href="https://map.kakao.com/link/map/'+address+','+lat+','+lon+'" target="_blank">카카오맵 길찾기</a>' +
' </div>' +
' </div>' +
'</div>';
displayMarker(locPosition, message,serial_no);
});
}
// 지도에 마커와 인포윈도우를 표시하는 함수
function displayMarker(locPosition, message,serial_no) {
var overlay = new kakao.maps.CustomOverlay({
content: message,
position: locPosition
});
var markers = [];
var marker = new kakao.maps.Marker({
map : map,
position: locPosition,
clickable : true
});
marker.setMap(map);
markers.push(marker);
// 클릭 버튼 보여주기
kakao.maps.event.addListener(marker, 'click', function(){
$("#"+serial_no).removeAttr('style');
overlay.setMap(map, marker);
});
clusterer.addMarkers(markers);
} // displayMarker end
} // marker functuon end