카카오 지도 api 사용중...

기존 CRUD게시판을

맛집 리뷰로 적자하고

카카오 지도 api를 사용할려고하는데

 

for ( var i=0; i<places.length; i++ ) {

        // 마커를 생성하고 지도에 표시합니다
        var placePosition = new kakao.maps.LatLng(places[i].y, places[i].x),
            marker = addMarker(placePosition, i), 
            itemEl = getListItem(i, places[i]); // 검색 결과 항목 Element를 생성합니다

        // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
        // LatLngBounds 객체에 좌표를 추가합니다
        bounds.extend(placePosition);

        // 마커와 검색결과 항목에 mouseover 했을때
        // 해당 장소에 인포윈도우에 장소명을 표시합니다
        // mouseout 했을 때는 인포윈도우를 닫습니다
        (function(marker, title) {
            kakao.maps.event.addListener(marker, 'mouseover', function() {
                displayInfowindow(marker, title);
            });

            kakao.maps.event.addListener(marker, 'mouseout', function() {
                infowindow.close();
            });
            kakao.maps.event.addListener(marker, 'click', function() {
                // 마커 위에 인포윈도우를 표시합니다//맨마지막값만 들어감.
            	 displayInfowindow(marker, '?!');
        	});
            
            itemEl.onmouseover =  function () {
                displayInfowindow(marker, title);
            };

            itemEl.onmouseout =  function () {
                infowindow.close();
            };
        })(marker, places[i].place_name);

        fragment.appendChild(itemEl);
    }

아무래도 api문서가 있으니 별 문제는 없는데

click할 시 어떤 값을 넣고싶은데

이미 반복문에 감싸져있고 

맨마지막값만 들어가서

어디에 설정해야할까.....

 

 

----------------임시? 해결?---------------------

 

 kakao.maps.event.addListener(marker, 'click', function() {
                if(marker.getRange()==500){
            			
            			var imgOptions =  {
            		            spriteSize : new kakao.maps.Size(36, 691), // 스프라이트 이미지의 크기
            		            spriteOrigin : new kakao.maps.Point(0, (Number(marker.getTitle())*46)+10), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
            		            offset: new kakao.maps.Point(13, 37) // 마커 좌표에 일치시킬 이미지 내에서의 좌표
            		    };
                		var markerImage = new kakao.maps.MarkerImage(
                		'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png',
                		new kakao.maps.Size(31, 37), 
                		imgOptions);
                		marker.setImage(markerImage);
                		marker.setRange(300);
                		
                }else{
                	 marker.setRange(500);
                	 var imgOptions =  {
         		            spriteSize : new kakao.maps.Size(36, 691), // 스프라이트 이미지의 크기
         		            spriteOrigin : new kakao.maps.Point(0, (Number(marker.getTitle())*46)+10), // 스프라이트 이미지 중 사용할 영역의 좌상단 좌표
         		            offset: new kakao.maps.Point(13, 37) // 마커 좌표에 일치시킬 이미지 내에서의 좌표
         		   	 };
                	 var markerImage = new kakao.maps.MarkerImage(
                     'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png',
                     new kakao.maps.Size(36, 37),
                     imgOptions);
                	 marker.setImage(markerImage);
                	
                }
            });

아마 이렇게 하면 안 될것같은데...하면서

이미 만들어진 api에서 내가 활용을해야하니

각 marker의 title에 idx를 입력해주고

range 는 로드뷰에서 사용하는 값으로 나는 사용할이 없다

그래서 그 값들을 이용해서 설정했다

 

--------------------진짜 해결----------------------

 

kakao.maps.event.addListener(marker, 'click', (function(placePosition,i) {
            	displayInfowindow(marker, title);
            	return function() {
                    // #clickLatlng 영역에 좌표정보 출력
                    var message = '선택하신 위치는 ' +'"'+title+'"' +placePosition+' 입니다' + 'i값은 ' + i;
                    var resultDiv = document.getElementById('clickLatlng');
                    resultDiv.innerHTML = message;
                   
                    var ClickimageSrc = 'http://t1.daumcdn.net/localimg/localimages/07/2009/map/icon/ico_mn_13.png', // 마커 이미지 url, 스프라이트 이미지를 씁니다
                    NormalimageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_number_blue.png', 
                    ClickimageSize = new kakao.maps.Size(31, 40),// 마커 이미지의 크기
                    NormalimageSize = new kakao.maps.Size(36, 37),
                    imgOptions = new kakao.maps.Point(13, 37);
                    
                   var ClickImage = new kakao.maps.MarkerImage(ClickimageSrc,ClickimageSize,imgOptions),
                   	   Normalmage = new kakao.maps.MarkerImage(NormalimageSrc,NormalimageSize,imgOptions);
                   
                   if (!selectedMarker || selectedMarker !== marker) {

                       // 클릭된 마커 객체가 null이 아니면
                       // 클릭된 마커의 이미지를 기본 이미지로 변경하고
                       !!selectedMarker && selectedMarker.setImage(Normalmage);

                       // 현재 클릭된 마커의 이미지는 클릭 이미지로 변경합니다
                       marker.setImage(ClickImage);
                   }

                   // 클릭된 마커를 현재 클릭된 마커 객체로 설정합니다
                   selectedMarker = marker;
                }

            })(placePosition,i));

일단 위의 코드는

해당 마크를 클릭하면

아래에 해당 마크의 이름, 좌표가 나오고

자신이 클릭한것을 확인 할 수 있도록.

역시 문서를 하루종일 봐야....이해를 하는 것 같다

 

-예제-

 

일단 기본적으로 보이는 맵이다.

 

여기서 하나를 클릭하면

 

맵 위에 선택한 주소를 알려주고

맵에서도 위치를 알려주고 사용자가 알기 쉽게 표시를 줬다.