[Javascript] 다음 지도 API로 네이버 부동산 지도 따라하기 - 4. 이벤트 적용하기

이벤트를 거는 것도 다각형에 이벤트 등록하기2를 참조하면 된다.

하지만 여전히 Multipolygon이 걸림돌이다.

만약 신안군에 mouserover 이벤트를 적용 한다면,

신안군의 polygon 중 하나에 마우스를 올리면 신안군에 해당되는 모든 Polygon이 반응해야한다.

일단 해본 방법에는 두가지 방법이 있다.

1. svg path에 class 지정하기

처음에는 addListener로 적용하려면 이벤트 발생시 계속 Loop를 돌려야한다는 점이 불필요해보였기 때문에 class를 입히는 방법을 생각했다.

polygon 객체는 이렇게 생겼다. Vc 아래에 map에 보이게 되는 path가 존재한다. 여기에 $(polygon.Vc[0]).addClass("polygon-grp-00") 같은 방법으로 class를 지정해준다.

한가지 주의할 점은 polygon을 생성하고 나서가 아니라 setMap 메소드를 사용할때마다 class 넣어주고 이벤트를 적용해줘야한다.

setMap(null)를 하고 나면 class를 추가한게 없어져있다. 객체에서 setMap할 때마다 path 실시간으로 생성하는 것 같다.

그리고 이 방법은 API가 제공하는 이벤트 파라미터는 사용하지 못한다. 사용하려면 addListener로 Polygon 개별에 이벤트를 적용해야한다. 

//이벤트 적용
$(".polygon-grp-" + code).on('이벤트이름', { polygons : data.polygonObj.polygon}, function(e){
	pathFn(e.data.polygons);
}); 
//이벤트 해제
$(".polygon-grp-" + code).unbind(이벤트이름);

이 방법이 정말 쉽게 풀리는가 싶었지만........................모바일 웹에서는 먹히지 않는다. click 이벤트를 걸었지만 전혀 반응을 하지 못했다. 그래서 접었다...ㅜㅜ..헝

나는 모바일 웹 환경에서 서비스를 개발해야해서 이 방법은 접었다.

2. 다음 API에서 지원하는 addListener 사용하기

간단하다 그냥 쓰면 된다. callback에는 같은 code 값을 가진 Polygon을 Loop 돌리면 된다.

예시)

daum.maps.event.addListener(polygon, 'mouseover', function(e) {
	var code = data.code;
	$.each($(data[code].polygonObj.polygon), function(idx, grpPoly){
		grpPoly.setOptions({fillColor: '#B70037'});
	});
});

이 방법의 단점은 removeListener를 사용할 수 없다. 

이벤트를 추가할 때, 해당 Polygon의 법정동코드값을 같이 넣어줘야하는데 callback이 익명함수인경우는 사용할 수 없다. 

아니면 mouseover 이벤트 발생시 마우스 위치의 경/위도 값이 가지고 와서 지오코딩하는 방법이 있긴한데 답이 안나온다.

나는 원래 마우스오버/아웃 하고 클릭하면 오버/아웃 이벤트 제거 하는 것을 구상 했었는데 이벤트를 지울 수 없어서 mouseover, mouseout 관련한 이벤트는 포기했다. 깔끔하게.

대신 모바일(안드로이드5.1.1 기본 브라우저)에서는 이벤트가 작동한다.

필요한 기능에 따라 선택하면 될듯 싶다.. 

+ 모바일에선 click대신 mousedown을 사용하는게 정신건강에 이롭다.