마커를 클릭시 해당마커의 세부정보를 보여주고싶습니다

//맵을 띄울때 좌표변환
 jQuery.ajax({
       type:"POST",
       url:'<c:url value="/mainboard/ajaxCustomerAddr.do"/>',           
       cache : false,
       async : false,
       contentType : contentTypeString,
       dataType:"JSON", // 옵션이므로 JSON으로 받을게 아니면 안써도 됨
       success : function(data) {
         for(var i=0; i<data.length; i++){
         //console.log("data : ", data[i]);
         addr.push(data[i].address);
         id.push(data[i].ismartid);
         }
       }
   });
 
 
    // 데이터를 가져오기 위해 jQuery를 사용합니다
    // 데이터를 가져와 마커를 생성하고 클러스터러 객체에 넘겨줍니다
    // 데이터에서 좌표 값을 가지고 마커를 표시합니다
    // 마커 클러스터러로 관리할 마커 객체는 생성할 때 지도 객체를 설정하지 않습니다
 
    for(var i=0; i<addr.length; i++){
        
    geocoder.addressSearch(addr[i], function(result, status) {
        //console.log(result); //주소를 변환하여 값을 가져오는지 확인
        // 정상적으로 검색이 완료됐으면 
        if (status === kakao.maps.services.Status.OK) {

        var latlng = new kakao.maps.LatLng(result[0].y, result[0].x);
                var marker = new kakao.maps.Marker({
                    map : map,
                    position : latlng,
                    //image : markerImage
                });
                
                var content = '<div>' + result[0].address_name + '</div>';
                
                var infowindow = new kakao.maps.InfoWindow({
                    content : content
                });
                
                kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
                kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
                kakao.maps.event.addListener(marker, 'click', makeClickListener());
                
				console.log(marker.getTitle());
				
                markers.push(marker);
            clusterer.addMarkers(markers);
            //console.log(markers);  //마커배열안에 값이 들어갔는지 확인
        }
    });
    
    }

   // 인포윈도우를 표시하는 클로저를 만드는 함수입니다
   function makeOverListener(map, marker, infowindow) {
        return function() {
            infowindow.open(map, marker);
        };
    }

    // 인포윈도우를 닫는 클로저를 만드는 함수입니다
    function makeOutListener(infowindow) {
        return function() {
            infowindow.close();
        };
    }
    
    // 마커를 클릭하는 클로저를 만드는 함수입니다
    function makeClickListener() {
        return function() {
        	
        	jQuery.ajax({
                type:"POST",
                url:'<c:url value="/mainboard/markerinfo.do"/>',           
                cache : false,
                async : false,
                contentType : contentTypeString,
                dataType:"JSON", // 옵션이므로 JSON으로 받을게 아니면 안써도 됨
                success : function(data) {
                  
                  }
                }
            });
        	
        };
    }

해당 코드로 마커를 생성하여 사용하고있습니다. 마커를 띄어놓고 마커하나를 클릭시에 ajax를 사용하여 그 해당마커에 대한 상세정보를 DB에서 가져오고 싶은데 매개변수로 ID를 이용하여 DB에 접근하고싶은데 매개변수를 어떻게 보내야할지 모르겠습니다.

마커를 클릭시에 마커에 대한 정보값들을 어떤식으로 가져와야할까요 ?

마커 생성 시 객체 확장을 통해서 id 속성에 marker.id = id; 처럼 값을 할당하고
click 이벤트에서 var id = this.id; console.log(id); 로 마커의 id값을 불러올 수 있습니다.

다만 객체 확장 방식은 부작용이 있을 수 있기 때문에
var markers = [{id: id, marker: marker}, {id: id, marker: marker}, ..] 처럼
Id-Marker 매핑 테이블을 만들어 사용하는걸 추천드립니다.

답변 감사합니다.
이 방법으로 테스트 해보겠습니다.^^

1개의 좋아요