티스토리 뷰

매뉴얼

daum (Kakao) 지도 api 모음

feelname7 2019. 2. 21. 14:41


<!-- 지도를 표시할 div 입니다 -->

<div id="map" style="width:100%;height:350px;"></div>


<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=5f641855a6e0a6df4e1789a08d0e6f7b"></script>

<script>

var mapContainer = document.getElementById('map'), // 지도를 표시할 div

mapOption = {

center: new daum.maps.LatLng(37.533526, 126.901109), // 지도의 중심좌표

level: 3 // 지도의 확대 레벨

};


// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다

var map = new daum.maps.Map(mapContainer, mapOption);

</script>






ㆍ 좌표구하기


참고로 위도와 경도는 maps.google.com 의 구글지도에서, 

                            오른쪽 클릭 → 이곳이 궁금한가요? 선택하면 알아낼 수 있습니다.






#카카오 지도 #카카오 맵 #kakao map #daum 지도 api #다음 지도 api #다음 맵 api #다음 map api #daum map api #다음지도 api 키 

#다음지도 라이브러리 #다음 지도 모듈



#지도의 중심좌표 #중심좌표 구하기 #다음 지도의 중심좌표 #카카오 지도의 중심좌표

#다음 맵의 중심좌표 #카카오 맵의 중심좌표

#구글 맵 #google map #위도 경도 #구글 좌표 #구글 위도 #구글 경도






ㆍ 다음지도 클러스터러


마커 클러스터러에 클릭이벤트 추가하기


다음지도 클로스터러 좌표 데이터를 못가져오는 경우

다음 지도 api 클로스터링 할때 제이쿼리 링크 꼭 넣으십시요~~

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>



출처 : http://apis.map.daum.net/web/sample/addClustererClickEvent/

<사용한 데이터>

json파일이용 - http://apis.map.daum.net/download/web/data/chicken.json






<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>마커 클러스터러에 클릭이벤트 추가하기</title>

    

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>    <!-- ★ 추가 ★-->


</head>

<body>

<p style="margin-top:-12px">

     사용한 데이터를 보시려면

    <em class="link">

       <a href="/download/web/data/chicken.json" target="_blank">여기를 클릭하세요!</a>

    </em>

</p>

<div id="map" style="width:100%;height:350px;"></div>


<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요&libraries=clusterer"></script>

<script>

    var map = new daum.maps.Map(document.getElementById('map'), { // 지도를 표시할 div

        center : new daum.maps.LatLng(36.2683, 127.6358), // 지도의 중심좌표

        level : 14 // 지도의 확대 레벨

    });


    // 마커 클러스터러를 생성합니다

    // 마커 클러스터러를 생성할 때 disableClickZoom 값을 true로 지정하지 않은 경우

    // 클러스터 마커를 클릭했을 때 클러스터 객체가 포함하는 마커들이 모두 잘 보이도록 지도의 레벨과 영역을 변경합니다

    // 이 예제에서는 disableClickZoom 값을 true로 설정하여 기본 클릭 동작을 막고

    // 클러스터 마커를 클릭했을 때 클릭된 클러스터 마커의 위치를 기준으로 지도를 1레벨씩 확대합니다

    var clusterer = new daum.maps.MarkerClusterer({

        map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체

        averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정

        minLevel: 10, // 클러스터 할 최소 지도 레벨

        disableClickZoom: true // 클러스터 마커를 클릭했을 때 지도가 확대되지 않도록 설정한다

    });


    // 데이터를 가져오기 위해 jQuery를 사용합니다

    // 데이터를 가져와 마커를 생성하고 클러스터러 객체에 넘겨줍니다

    $.get("http://apis.map.daum.net/download/web/data/chicken.json", function(data) {

        // 데이터에서 좌표 값을 가지고 마커를 표시합니다

        // 마커 클러스터러로 관리할 마커 객체는 생성할 때 지도 객체를 설정하지 않습니다

        var markers = $(data.positions).map(function(i, position) {

            return new daum.maps.Marker({

                position : new daum.maps.LatLng(position.lat, position.lng)

            });

        });


        // 클러스터러에 마커들을 추가합니다

        clusterer.addMarkers(markers);

    });


    // 마커 클러스터러에 클릭이벤트를 등록합니다

    // 마커 클러스터러를 생성할 때 disableClickZoom을 true로 설정하지 않은 경우

    // 이벤트 헨들러로 cluster 객체가 넘어오지 않을 수도 있습니다

    daum.maps.event.addListener(clusterer, 'clusterclick', function(cluster) {


        // 현재 지도 레벨에서 1레벨 확대한 레벨

        var level = map.getLevel()-1;


        // 지도를 클릭된 클러스터의 마커의 위치를 기준으로 확대합니다

        map.setLevel(level, {anchor: cluster.getCenter()});

    });

</script>

</body>

</html>






'매뉴얼' 카테고리의 다른 글

브라켓(Brackets) 에디터 ftp 연결방법과 그외 단축키....(추가중..)  (4) 2019.04.09
이클립스(eclipse) IDE 수정중..  (0) 2019.03.20
오라클 데이타베이스 다운로드 및 설치.. 수정중  (0) 2019.02.11
heroku nodejs 배포하기_추가중..  (0) 2019.02.03
git 명령어_수정중..  (0) 2019.02.02
댓글