다음지도api(카카오맵) - 작업기(3)

지도 등록이 완성되었기에 이제는 클라이언트의 요청대로 화면에 등록된 주소들을 여러개의 마커로 뿌려줘야 하는 부분 작업...

 

조금은 헤매이긴 했지만서도.. 쩝 해야 되는 부분이니 ㅜ,.ㅡ

 

여기서 좌표값을 얻어 왔기에 DB로 저장후 좌표값을 불러 왔다.

 

 

 

var mapContainer = document.getElementById('map'), // 지도를 표시할 div     mapOption = {        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표        level: 3 // 지도의 확대 레벨    };  
// 지도를 생성합니다    var map = new kakao.maps.Map(mapContainer, mapOption); 

 

위 스크립트도 특별히 변하는 것이 없는 기본 상태

 

다음부터가 여러개의 마커를 찍고 마커에 롤 오버시 마커 내용을 표시 하기 위한 다음지도 api 이다.

 

var positions = [

    {

        content: '<div>카카오</div>', // 마커 롤 오버시 표시될 내용 입니다.

        latlng: new kakao.maps.LatLng(33.450705, 126.570677) //  좌표 입니다.

    },

    {

        content: '<div>생태연못</div>', 

        latlng: new kakao.maps.LatLng(33.450936, 126.569477)

    },

    {

        content: '<div>텃밭</div>', 

        latlng: new kakao.maps.LatLng(33.450879, 126.569940)

    },

    {

        content: '<div>근린공원</div>',

        latlng: new kakao.maps.LatLng(33.451393, 126.570738)

    }

];

 

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

    // 마커를 생성합니다

    var marker = new kakao.maps.Marker({

        map: map, // 마커를 표시할 지도

        position: positions[i].latlng // 마커의 위치

    });

 

    // 마커에 표시할 인포윈도우를 생성합니다 

    var infowindow = new kakao.maps.InfoWindow({

        content: positions[i].content // 인포윈도우에 표시할 내용

    });

 

    // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다

    // 이벤트 리스너로는 클로저를 만들어 등록합니다 

    // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다

    kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));

    kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));

}

 

// 인포윈도우를 표시하는 클로저를 만드는 함수입니다 

function makeOverListener(map, marker, infowindow) {

    return function() {

        infowindow.open(map, marker);

    };

}

 

// 인포윈도우를 닫는 클로저를 만드는 함수입니다 

function makeOutListener(infowindow) {

    return function() {

        infowindow.close();

    };

}

 

근데 이렇게 하게 되면 마커가 어디어디에 찍혀있는지 알 방법이 스크롤를 이용한 지도 확대/축소 밖에는 없었다.

마커가 어디어디에 찍혀 있는지 확인하기 위해 지도의 중심좌표와 확대레벨을 자동조정 하게끔 해야할 필요가 있어 또 다시 삽질 후 아래와 같은 결과가 나왔다 저게 답이 아닐수도 있지만서도 그나마....

 

var positions = [

    {

        content: '<div>카카오</div>', // 마커 롤 오버시 표시될 내용 입니다.

        latlng: new kakao.maps.LatLng(33.450705, 126.570677) //  좌표 입니다.

    },

    {

        content: '<div>생태연못</div>', 

        latlng: new kakao.maps.LatLng(33.450936, 126.569477)

    },

    {

        content: '<div>텃밭</div>', 

        latlng: new kakao.maps.LatLng(33.450879, 126.569940)

    },

    {

        content: '<div>근린공원</div>',

        latlng: new kakao.maps.LatLng(33.451393, 126.570738)

    }

];

 

 

var bounds =  new kakao.maps.LatLngBounds();

 

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

    // 마커를 생성합니다

    var marker = new kakao.maps.Marker({

        map: map, // 마커를 표시할 지도

        position: positions[i].latlng // 마커의 위치

    });

bounds.extend(positions[i].latlng);

 

 

    // 마커에 표시할 인포윈도우를 생성합니다 

    var infowindow = new kakao.maps.InfoWindow({

        content: positions[i].content // 인포윈도우에 표시할 내용

    });

 

    // 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다

    // 이벤트 리스너로는 클로저를 만들어 등록합니다 

    // for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다

    kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));

    kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));

}

 

map.setBounds(bounds);

 

// 인포윈도우를 표시하는 클로저를 만드는 함수입니다 

function makeOverListener(map, marker, infowindow) {

    return function() {

        infowindow.open(map, marker);

    };

}

 

// 인포윈도우를 닫는 클로저를 만드는 함수입니다 

function makeOutListener(infowindow) {

    return function() {

        infowindow.close();

    };

}

 

위에 빨간색으로 표시된 부분을 추가해주니 생각처럼 나와주고 있다.

아래는 예시 화면 디자인은 아직 작업중이라 ㅡㅡ;;

 

 

 

다음은 php를 쓰고 있는 분들을 위한 좌표 DB로 가져오기

 

var positions = [

    {

        content: '<div>카카오</div>', // 마커 롤 오버시 표시될 내용 입니다.

        latlng: new kakao.maps.LatLng(33.450705, 126.570677) //  좌표 입니다.

    },

    {

        content: '<div>생태연못</div>', 

        latlng: new kakao.maps.LatLng(33.450936, 126.569477)

    },

    {

        content: '<div>텃밭</div>', 

        latlng: new kakao.maps.LatLng(33.450879, 126.569940)

    },

    {

        content: '<div>근린공원</div>',

        latlng: new kakao.maps.LatLng(33.451393, 126.570738)

    }

];

 

 

그냥.......

이부분을 db에서 가져오기위해 쓴 방법

 

var positions = [

    <?php

$sql="select * .........";

$result=mysql_query($sql);

for($i=0; $map_marker=mysql_fetch_array($result); $i++)

{

$lat = $map_marker[저장된 lat값];

$lng = $map_marker[저장된 lng값];

$content ='<div>'.$map_marker[표시하고자하는내용].'</div>';

echo '{ content: "'.$content.'", latlng: new kakao.maps.LatLng('.$lat.','.$lng.') },';

}

?>

];

 

위에 빨간 부분은 정답은 아니고 작업하시는분들 이해들 돕기 위한 여러개의 방법중 하나의 방법일 뿐이다. 참고만 하시길......

 

 

실제 적용페이지.....

제주부동산365