Mouseevent.latlng() 좌표 오차?

지도/로컬 API
#1

안녕하십니까,

카카오맵 API를 이용하여 선택한 위치의 좌표를 db에 저장하고 웹을 리로드시에

저장된 위치에 마커를 찍어주는 기능을 구현중입니다.

kakao.maps.event.addListener(map, “click”, function (mouseEvent) {
let latLng = mouseEvent.latLng;
lat = latLng.getLat();
lon = latLng.getLng();

이를 통하여 얻은 좌표값을 바로 지도에 입력해봐도 선택한 위치의 좌표가 아니었기에
mouseevent를 통하여 얻은 좌표값이 실제로 그린 map의 좌표값이 상이함을 알 수 있었습니다…
어떤것이 값의 오차를 불렀는지, 해결방안 부탁드립나다 !

참고로 customOverlay 사용중입니다.

#2

아래 코드로 확인해보면 클릭한 위치에 맞게 CustomOverlay가 생성됩니다.
커스텀 오버레이에 적용된 스타일이 영향을 주어 위치가 맞지 않는 경우가 있습니다.
이전 답변도 함께 참고해주세요.

kakao.maps.event.addListener(map, 'click', function (mouseEvent) {
	let latLng = mouseEvent.latLng;
	lat = latLng.getLat();
	lon = latLng.getLng();    

    //클릭한 위치에 커스텀 오버레이 생성
    const customOverlay = new kakao.maps.CustomOverlay({
        position: latLng,
        content: '<div>click!</div>',
        map: map
    });

    console.log(latLng); // mouseEvent latlng 출력
    console.log(customOverlay.getPosition()); // 생성한 커스텀 오버레이 위치 출력    
});

https://devtalk.kakao.com/t/topic/95064/2?u=lea.ju
https://devtalk.kakao.com/t/topic/111187/2?u=lea.ju

확대/축소/지도 이동에 따른 마커 위치 어긋남
#3

답변 주신 사항 잘 확인했습니다.
하지만 제 경우는
let latLng = mouseEvent.latLng;
클릭한 좌표값의 위도, 경도를 따로 뽑기 위하여
latLng.getLat(); 를 사용한 것이 문제였습니다.

kakao.maps.event.addListener(map, “click”, function (mouseEvent) {
let latLng = mouseEvent.latLng;
lat = latLng.getLat(); // 유저가 선택한 위도 값을 변수에 저장
lon = latLng.getLng(); // 유저가 선택한 경도 값을 변수에 저장

console.log(latLng);
console.log("lat : " + lat + " lng : " + lng);
}

이 결과 latLng에 저장된 lat, lng 값과
getLat(), getLng()의 값이 상이했습니다.
이것에 대한 이유가 궁금합니다 …
감사합니다.

#4

자답입니다… lon변수에 저장하고 lng 변수를 출력했네요…
문제 없습니다
감사합니다

1개의 좋아요