useEffect(() => {
// 클릭한 위치와 병원 위치 사이의 선과 오버레이를 생성
if (markerExist && latlng) {
setOverlays([]);
var newPolylines: any[] = [];
var newOverlays: any[] = [];
vetHospitalInfo.forEach((hospital: any) => {
if (hospital['도로명전체주소'] && hospital['소재지전체주소'] !== "") {
const geocoder = new kakao.maps.services.Geocoder();
const callback = function (result: any, status: any) {
if (status === kakao.maps.services.Status.OK) {
const x = result[0].x;
const y = result[0].y;
setX(x);
setY(y);
const hospitalPosition = new kakao.maps.LatLng(y, x);
const linePath = [hospitalPosition, latlng];
// 클릭한 마커와 병원 위치 사이의 거리 계산
const polyline = new kakao.maps.Polyline({
path: linePath,
strokeWeight: 5,
strokeColor: '#FFAE00',
strokeOpacity: 0,
strokeStyle: 'solid'
});
// 지도에 선을 표시
polyline.setMap(map);
newPolylines.push(polyline);
const distance = polyline.getLength() / 1000;
var content = `
<div class="vet-hospital-overlay" style="background-color: white; color: black; width:200px; padding: 10px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) ; border: 2px solid black">
<div class="name" style="font-weight: bold; margin-bottom: 5px; font-size:10px;">${hospital['사업장명']}</div>
<div class="address" style="margin-bottom: 5px; font-size:10px;">${hospital['소재지전체주소']}</div>
<div class="tel" style="font-size:10px;">${hospital['소재지전화']}</div>
<p>${distance}</p>
</div>
`;
// 커스텀 오버레이 생성
var customOverlay = new kakao.maps.CustomOverlay({
map: map,
position: hospitalPosition,
content: content,
xAnchor: 0,
yAnchor: 0.91,
zIndex: 900,
});
polyline.setMap(null);
customOverlay.setMap(null);
// 클릭한 마커와 병원 위치 사이의 거리가 일정 범위 내에 있다면 오버레이 표시
if (distance <= distanceRange/2) {
// 지도에 오버레이 표시
customOverlay.setMap(map);
newOverlays.push(customOverlay);
console.log("바로 넣었을때 배열", overlays)
}
else{
polyline.setMap(null);
console.log(customOverlay, hospital['사업장명'], "제거중")
// customOverlay.setMap(null);
}
}
};
geocoder.addressSearch(hospital['도로명전체주소'], callback);
}
});
// 생성된 선과 오버레이 상태를 업데이트합니다.
setPolylines(newPolylines);
setOverlays(newOverlays);
}
}, [markerExist, latlng, distanceRange, vetHospitalInfo, map]);
여기서 console로 console.log(customOverlay, hospital[‘사업장명’], “제거중”) 찍어뒀던 부분은 잘 실행 됩니다.
customOverlay객체도 잘 나오고요 그런데 setMap(null)이 적용이 안됩니다 ㅠ