안녕하세요. 수고많으십니다.
다름이 아니라 우클릭 이벤트로서, 위경도 값을 가져오고 장소를 추가한 후 반경을 그립니다
아래는 해당 설명부의 일부 코드입니다.
// 좌표로 마커와 원을 그림
this.drawMarkerAndCircle(
new kakao.maps.LatLng(this.setPlaceX, this.setPlaceY),
parseInt(this.setPlaceRedius, 10)
)
drawMarkerAndCircle(position, radius) {
// 기존 마커와 원을 제거
if (this.circle) {
this.circle.setMap(null)
}
if (this.overlay) {
this.overlay.setMap(null)
}
// 새로운 원 생성 및 지도에 추가
this.circle = new kakao.maps.Circle({
center: position,
radius: radius,
strokeWeight: 1,
strokeColor: '#ff0000',
strokeOpacity: 0.7,
strokeStyle: 'solid',
fillColor: '#ff0000',
fillOpacity: 0.2
})
this.circle.setMap(this.map)
// 새로운 커스텀 오버레이 생성 및 지도에 추가
const overlayContent = document.createElement('div')
overlayContent.innerHTML = `
<div id="custom-overlay" class="custom-overlay--two">
<div class="balloon">
<div id="custom-overlay__title">
<div>
<img src="" alt="mapMaker" />
</div>
<h5 style="margin: 0px">${this.setPlaceTitle}</h5>
</div>
</div>
</div>
this.overlay = new kakao.maps.CustomOverlay({
content: overlayContent,
position: position,
zIndex: 2
})
this.overlay.setMap(this.map)
},
이러한 식으로 그리게 되는데,
소켓으로 연동하여 어떠한 물체가 계속해서 위경도 쏴주면서 마커와 레이블을 지웠다 그렸다 실시간성처럼 작업 진행하는데 해당 반경 즉, 원 그린 곳에 왔을 시 알림을 주고싶은데 어떻게 해야할까요…