카카오지도API

문제점 0226(해결) 추후 해결방법 작성

• 마커 클릭시 호출된 커스텀 오버레이의 닫기버튼이 작동되지않음
• 마커 마우스 오버시 한가지의 마커만 이미지 변경됨
• 마커 마우스 오버시 다른마커들에 가려져 보임(오버레이 동일)
• 커스텀 오버레이를 하나만 표출

1. 지도 불러오기(key연결)

<div id="review"></div>
    <div id="map"></div>
<script type="text/javascript"
src="//dapi.kakao.com/v2/maps/sdk.js?appkey=ad32e4cc626799cc0ad5db80f46f316a">
</script>

<script>
var mapContainer = document.getElementById('map'),// 지도를 표시할 div 
    mapOption = { 
        // 북구청앞 좌표 고정
        center: new kakao.maps.LatLng(35.173956643954675, 126.9191938589476), // 지도의 중심좌표
        level: 5 // 지도의 확대 레벨
    };

// 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption); 

// 지도 확대 축소를 제어할 수 있는  줌 컨트롤을 생성합니다
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
</script>

2. marker 생성

// 마커를 표시할 위치와 title 객체 배열입니다
// 이후 리뷰에 저장된 주소로 객체 생성
var positions = [
    {
        title: '스타벅스 전남대', 
        latlng: new kakao.maps.LatLng(35.1747707, 126.914430)
        // 마커 좌표로 가게 추가
    },
    {
        title: '투썸 전남대', 
        latlng: new kakao.maps.LatLng(35.1751410, 126.915340)
        // 마커 좌표로 가게 추가
    },
    {
        title: '시작 스터디카페', 
        latlng: new kakao.maps.LatLng(35.1774862, 126.917885)
        // 마커 좌표로 가게 추가
    }
];

// 마커 이미지의 이미지 주소입니다
var imageSrc = "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png"; 
// 보관된 리뷰 개수만큼 마커 생성
for (var i = 0; i < positions.length; i ++) {
    
    // 마커 이미지의 이미지 크기 입니다
    var imageSize = new kakao.maps.Size(24, 35); 
    
    // 마커 이미지를 생성합니다    
    var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize); 
    
    // 마커를 생성합니다
    var marker = new kakao.maps.Marker({
        map: map, // 마커를 표시할 지도
        position: positions[i].latlng, // 마커를 표시할 위치
        title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
        image : markerImage // 마커 이미지 
    });
}

3. 커스텀 오버레이 생성

// 커스텀 오버레이에 표시할 내용입니다     
// HTML 문자열 또는 Dom Element 입니다 

// 오버레이 컨텐츠 작성
var content = '<div class="overlaybox">' +
    '    <span class="boxtitle">스타벅스 전남대'+
    		***********닫기 위치 수정(임시 margin)
    '    <span class="close" id="close" title="닫기">닫기</span>'+
    '    </span>'+
    '    <div class="first">' +
    '    </div>' +
    '    <ul>' +
    '        <li class="up">' +
    '            <span class="number">오픈시간</span>' +
    '            <span class="title">09:00</span>' +
    '            <span class="arrow up"></span>' +
    '            <span class="count"></span>' +
    '        </li>' +
    '        <li>' +
    '            <span class="number">마감시간</span>' +
    '            <span class="title">17:30</span>' +
    '            <span class="arrow up"></span>' +
    '            <span class="count"></span>' +
    '        </li>' +
    '        <li>' +
    '            <span class="number">위치</span>' +
    '            <span class="title">광주 북구 호동로 65</span>' +
    '            <span class="arrow up"></span>' +
    '            <span class="count"></span>' +
    '        </li>' +
    '        <li>' +
    '            <span class="number">리뷰 수</span>' +
    '            <span class="title">7</span>' +
    '            <span class="arrow down"></span>' +
    '            <span class="count"></span>' +
    '        </li>' +
    '    </ul>' +
    '</div>';
// 커스텀 오버레이가 표시될 위치입니다 >> 연결된주소값으로 수정
var position = new kakao.maps.LatLng(35.1774862, 126.917885);

// 커스텀 오버레이를 생성합니다
var customOverlay = new kakao.maps.CustomOverlay({
    position: position,
    content: content,
    xAnchor: 0.3,
    yAnchor: 0.91
});

// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
kakao.maps.event.addListener(marker, 'click', function() {
    customOverlay.setMap(map);
});

// 커스텀 오버레이를 지도에 표시합니다(클릭 이벤트시 실행할거기때문에 필요X)
//customOverlay.setMap(map);

// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다 
function closeOverlay() {
    customOverlay.setMap(null);     
}

4. 추가 사항

• 화면 상 보이지 않는 마커 추척
• 디폴트 위치 수정
• JSP로 옮기기
• 좌표 > 주소 바꾸기