카카오지도 -> polyline 사용중 문의드립니다

지도/로컬 API
#1

지도/로컬 API에 대한 문의게시판입니다.
폴리라인(polyline) 생성시
아래와 같이 생성중입니다.

var polyline = new daum.maps.Polyline({
map : map, //지도객체
path : paths, //좌표배열
strokeOpacity: 0.8,
strokeStyle: ‘solid’
});

생성된 polyne 에 클릭 이벤트를 추가하였습니다.

daum.maps.event.addListener(polyline, ‘click’, function(mouseEvent) {
alert(“클릭”);
});

위 코드는 정상적으로 작동합니다.

제가 문의드리는 내용은

위와 같은 polyline 객체가 N 개인 경우…

내가 현재 클릭한 polyline의 좌표나 특정 ID 값을 부여하여 사용이 가능한지 문의드립니다.

예를 들어 polyline 생성시

var polyline = new daum.maps.Polyline({
map : map,
id : “polyne1”,…

와 같은 식으로 추가하여

해당 polyline 을 클릭시

daum.maps.event.addListener(polyline, ‘click’, function(target) {
alert(target.id);
});
위와 같이 사용가능한 방법이 있을까요…?

#2

http://apis.map.daum.net/web/documentation/#event_trigger 를 사용하면 가능합니다.

// custom event
daum.maps.event.addListener(polyline, 'poly_click', function(event) {
    console.log(event.id, event.target, event.originalEvent);
});

// original click event
daum.maps.event.addListener(polyline, 'click', function(event) {
    // dispatch custom event 'poly_click'
    daum.maps.event.trigger(polyline, 'poly_click', { 
        id: 'polyne1',
        target: polyline,
        originalEvent: event
    });
});

실제 실행시켜 본 코드는 아니라서;
혹시라도 동작하지 않으면 다시 댓글 주세요 ^^;

#3

답변주신 내용을 토대로 아래와 같이 수정(polyline 이 N개) 하여 적용하였습니다.

daum.maps.event.addListener(polyline[i], 'poly_click', function(event) {
	console.log(event.id);
});

daum.maps.event.addListener(polyline[i], 'click', function(event) {
	//dispatch custom event 'poly_click'
	daum.maps.event.trigger(polyline[i], 'poly_click', { 
		id: "polyline",
		target: polyline[i],
		originalEvent: event
	});
});

위의 내용을 토대로 실행을 하게 되면 아래와 같은 오류가 발생합니다.

Uncaught TypeError: Cannot read property ‘m’ of undefined
at i (open.js:8)
at Object.Kj (open.js:72)
at fa. (실행파일명.jsp:486)
at fa. (open.js:8)
at Array.forEach ()
at r (open.js:2)
at i (open.js:8)
at fa.c.Lj (open.js:129)
at SVGPathElement.g (open.js:6)

라이브러리를 정상적으로 호출하지 못한것인가요…?

호출 URL 아래와 같습니다.
src="//apis.daum.net/maps/maps3.js?apikey=appKey&libraries=services"
(appKey 는 보안상의 문제로 appKey로 표기하였습니다.)

#4

for문으로 돌리셨나요?
‘click’ 이벤트 안쪽의 daum.maps.event.trigger 첫 번째 매개변수로 넘겨 준 polyline[i]에서
i 값이 폴리라인 배열의 크기 값으로 설정되어 있을 겁니다.
당연히 polyline배열에서 length - 1까지 polyline 인스턴스가 접근되고
그 배열 length 이상의 인덱스를 접근하면 undefined가 나올거고요
API 내부에서는 undefined 가 polyline인 줄 알고 그 메소드를 사용하려고 하다보니 에러가 나는 상황입니다.

실행 순간의 스코프와 문맥을 참조하게 되는 자바스크립트 특성(execution context)에 기인한 현상입니다.
자바스크립트는 자바(Java)와 C계열 언어와 같이 정적 컴파일 언어가 아니기 때문에 항상 염두에 두셔야 하는 부분입니다.
보통 작성하신 패턴(for문 안에서 이벤트 리스너를 통해 핸들러 등록)에서 이런 실수를 많이 하게 됩니다.

작성하신 for 문을
Array.forEach, 제이쿼리를 쓰면 $.each로 반복문을 바꾸거나
스코프 유지를 위해 클로져로 감싸주세요

1개의 좋아요
각각의 다른 주소로 여러개의 지도 만들기
인포윈도우 문제로 질문드립니다
#5

답변에 도움이 되어 해결되었습니다.
자바스크립트가 아닌 일반적인 자바와 같이 객체를 전달하는 정도로만 생각하고 있었는데…
이번 기회에 새로운 부분을 알게 되었습니다.
감사합니다.^^

1개의 좋아요