마커 setPosition 사용 시 에러 질문드립니다

카카오맵 API (지도/로컬)
1

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.

이벤트 리스너를 통해서 특정 마커의 위치를 전달받은 후,
전역으로 선언되어 있는 marker 변수에 setPosition를 사용하여 전달받은 위치로 변경해주려합니다.
=> marker.setPosition(new kakao.maps.LatLng(event.latLng.Ma, event.latLng.La));

기존 위치의 데이터는 해당 이미지와 같이 전달받는걸 확인했고, marker도 존재하는 부분을 확인했습니다.
image

그 후에는 아래의 라이브러리가 실행되어야하구요
confirmAndCancleAlert(‘등록을 완료하시겠습니까?’, “확인 클릭 시 신규 좌표로 변경됩니다.”).then((result) => {

그런데 kakao.js에서 계속해서 아래와 같은 에러가 나고 있어 문의드립니다

kakao.js:7 Uncaught
TypeError: Cannot read properties of undefined (reading ‘call’) at t. (kakao.js:7:429) at Array.forEach () at s (kakao.js:2:339) at h (kakao.js:7:405) at c.ub (kakao.js:164:466) at HTMLDocument.g (kakao.js:6:47)

(anonymous) @ kakao.js:7
s @ kakao.js:2
h @ kakao.js:7
c.ub @ kakao.js:164
g @ kakao.js:6

궁금한 점은

  1. 혹시 setPosition 메서드를 사용할 때 위의 방식으로 데이터를 넣어주면 안되고
    무조건적으로 marker.setPosition(new kakao.maps.LatLng 형태로 사용하여 좌표를 신규로 넣어줘야하는건가요?

  2. 기존 좌표에 신규 좌표 값을 뒤집어씌우는 방법이 없는건가요?

  3. 만약 신규로 넣어줘야한다면 기존에 존재하는 좌표를 삭제해준 후 새로운 값을 추가하여 마치 변경되는 것 처럼 해줘야하는건가요?

  4. 만약 setPosition으로 데이터를 변경하는게 가능하다면, 이벤트 리스너쪽에 문제일 수 있는지도요!

2

안녕하세요~

메세지의 오류만 보면,
call 메소드를 실행할 객체가 undefined라는 것인데,

코드를 안봐서 모르겠지만,
어딘가에서 kakao.maps.event.addListener() 함수를 사용시
addListener의 함수의 인자의 순서가
(객체, 이벤트명, 핸들러함수) 이러한 방식으로 들어가야 되는데,
이 핸들러 함수가 제대로 들어갔는지 확인부탁드립니다.

그리고 질문에 답변을 드리면

  1. marker의 setPosition함수는 latLng객체를 넣게 되어 있고, 현재 이용하시는 방법도 보면 새로운 객체를 만들어서 사용하고 있습니다.
    LatLng 객체에 내부좌표를 수정할 수 있는 기능이 없기 때문에, 새로운 좌표값이 나오면 새롭게 만들어서 이용하셔야 합니다. 내부적으로 임의 수정시, 객체 내부의 여러 플래그들이 활성화가 안되거나 할 수 있어서 정상동작을 보장하지 않습니다.

또한 Ma, La 와 같은 속성은 쓰시면 안됩니다. 이는 저희가 제어하는게 아닌 랜덤생성이라, 그렇게 이용하시면 추후 저희의 업데이트에 따라, 즉시 오류가 발생할 수 있으니 참고 바랍니다.
https://apis.map.kakao.com/web/documentation
위 사이트를 참고해서 좌표를 가지고 오는 메소드를 사용해 주시기 바랍니다.

  1. marker객체의 setPosition을 이용하는 것이라면, 말씀하시는 것처럼 마커객체는 그대로 두고, 내부의 마커 좌표만 바꾸는 방법입니다.
  2. 이건 어떤 말씀인지 정확히 모르겠습니다;;;
  3. 동작가능한 전체적인 코드가 없으므로, 확인이 불가능합니다.
    다만 제가 위에 적은 내용처럼, 해당 내용의 경우엔 핸들러함수가 들어가야될 인자 부분에, 함수가 아닌 다른 객체나, 변수가 들어가서 발생한 오류일 수 있습니다.

한번 참고 부탁드립니다.

3

Ma, La 와 같은 속성 대신 좌표를 가지고 오는 메소드를 이용하라고 알려주셨는데,
정적 좌표가 아닌 클릭(event)에 의한 동적 좌표를 인자로 받았을 때의 처리 방법을 알려주실 수 있을까요??
이

매개변수를 통해 전달받은 동적 좌표와 내부에서 마커를 생성하여 지도 위에 위치를 찍어줬을 때 왜인지…서로 다른 좌표값이 나오더라구요

해당 setMapEvent(addProjectCenterMarker) 함수를 실행하는 과정입니다

function setMapEvent(setEvent) {
		commonKakaoEvent();

		marker = new kakao.maps.Marker({ map: map, draggable: true, });
		centerMarkers.push(marker);	// 배열에 담아주기

		// 마커 드래그 및 지도 클릭 시 콜백함수 호출하는 리스너 추가
		addCenterMarkerDragedListener = kakao.maps.event.addListener(marker, 'dragend', (event) => setEvent(event));
		addCenterMarkerListener = kakao.maps.event.addListener(map, 'click', (event) => setEvent(event));

		markerDragTooltipEvent(marker);
	}

function addProjectCenterMarker(event) {
		var marker = new kakao.maps.Marker({
		position:map.getCenter()
		})

console.log(marker) // 51~~~ & 113~~
console.log(event.latLng) // 127.0~~~~ & 37.~~~
4

안녕하세요~

우선

kakao.maps.LatLng 클래스의 경우, getLat(), getLng()으로 좌표값을 가져올 수 있습니다. 즉 직접 속성 접근은 피해주시기 바랍니다. 이 부분은 위에 제가 적었다시피 가변변수로, 이 부분 사용에 대한 추후 업데이트 따른 오류는 저희가 보장하지 않습니다.

질문주신 좌표 값이 다른 이유는,
카카오 지도 API는 기본적으로 내부 투영좌표계를 WCONG을 사용하고 있습니다. wcong은 wtm * 2.5 값에 해당하는 값이라서,
위와 같이 큰단위의 숫자가 나오게 됩니다.

회사마다 사용하는 좌표계가 다르고, 저희가 OpenAPI를 런칭할때, OpenAPI에서 사용하는 좌표계는 EPSG:4326 (WGS84) 즉, 위경도 좌표를 사용하는 것으로 결정하여 배포(제일 많이 쓰이는 지리좌표계이기도 하고)를 하였기 때문에 모든 getter, setter함수들은 이 좌표계를 따라서 동작하게 됩니다.

그래서 내부의 속성값을 보면 이상한 숫자가 들어있다 하더라도,
정상 getter인 getPosition() 을 이용하면, 위경도 좌표값이 나오게 됩니다.

이부분 참고 부탁드립니다.
추가로 자바스크립트는 난독화를 진행한 후에 배포됩니다.
그래서 개발자도구의 콘솔에서 객체들을 까보면 대략적인 값은 알 수 있으나
해당 객체를 컨트롤하는 메소드들의 경우엔
https://apis.map.kakao.com/web/documentation/

꼭 문서를 참고해 주시기 바랍니다.

5

네 답변 감사합니다
LatLng 객체에 좌표를 담아서 해당 메서드를 사용하는걸 권장하신다하여,
기존 이벤트 객체를 아예 LatLng 객체에 담아서 주니 제대로 작동하네요

addCenterMarkerListener = kakao.maps.event.addListener(map, 'click', (event) => {
			
			// 이벤트 객체에서 latLng 추출
			var latLng = event.latLng;
			// 위도와 경도 추출
			var lat = latLng.getLat();
			var lng = latLng.getLng();
			// 새로운 LatLng 객체 생성
			var newLatLng = new kakao.maps.LatLng(lat, lng);

			setEvent(newLatLng)

		});

마커를 가져올 때에도 LatLng 메서드를 사용할 수 있구요

marker.setPosition(new kakao.maps.LatLng(event.getLat(), event.getLng()));

덕분에 해결했습니다 감사합니다

1개의 좋아요