[다음지도API] 클러스터

카카오 개발자센터

developers.kakao.com/

Kakao Developers

들어가서 로그인한다음에 내 애플리케이션에서 애플리케이션 추가를 누른다음에 앱이름 사업자명 정하시고 저장 누르면 됩니다. 

그리고 데모를 클릭해서 들어가시면 앱키가 나오는데 앱키에서 javascript 키를 복사해둡니다. 그리고 하단에있는 플랫폼에서 플랫폼 추가를 눌러서 IOS, ANDROID, WEB 중에 자신에 맞는걸 선택하셔서 등록을 해주면 이제 사용 가능합니다.

 

 

참고 코드

<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 kakao.maps.Map(document.getElementById('map'), { // 지도를 표시할 div
        center : new kakao.maps.LatLng(36.2683, 127.6358), // 지도의 중심좌표 
        level : 14 // 지도의 확대 레벨 
    });
    
    // 마커 클러스터러를 생성합니다 
    var clusterer = new kakao.maps.MarkerClusterer({
        map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체 
        averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정 
        minLevel: 10 // 클러스터 할 최소 지도 레벨 
    });
 
    // 데이터를 가져오기 위해 jQuery를 사용합니다
    // 데이터를 가져와 마커를 생성하고 클러스터러 객체에 넘겨줍니다
    //DB에서 불러와서 작업하실 분들은 JSON파일 부분을 수정해 주시면 됩니다. 
    $.get("/download/web/data/chicken.json", function(data) {
        // 데이터에서 좌표 값을 가지고 마커를 표시합니다
        // 마커 클러스터러로 관리할 마커 객체는 생성할 때 지도 객체를 설정하지 않습니다
        var markers = $(data.positions).map(function(i, position) {
            return new kakao.maps.Marker({
                position : new kakao.maps.LatLng(position.lat, position.lng)
            });
        });

        // 클러스터러에 마커들을 추가합니다
        clusterer.addMarkers(markers);
    });
    
    //php기준 수정
     $.getJSON(."/store_list_json.php", function(data) {
        // 데이터에서 좌표 값을 가지고 마커를 표시합니다
        // 마커 클러스터러로 관리할 마커 객체는 생성할 때 지도 객체를 설정하지 않습니다
        var markers = $(data.positions).map(function(i, position) {
            return new kakao.maps.Marker({
                position : new kakao.maps.LatLng(position.lat, position.lng)
            });
        });

        // 클러스터러에 마커들을 추가합니다
        clusterer.addMarkers(markers);
    });
    
</script>

//store_list_json.php파일
<?
    include_once("./_common.php");

    $mb_6 = $member['mb_6'];
    $mb_7 = $member['mb_7'];


    $foodType = $filterConfig['foodType'];
    $sortType = $filterConfig['sortType'];
    $distanceType = $filterConfig['distanceType'];

    $sql_search = "";

    if($foodType){
        $sql_search .= " and food1 = '{$foodType}' "; 
    }

    if($sortType){
        if($sortType == "subs"){
            $sst = "desc";
        }else{
            $sst = "asc";
        }
        $order_by = " order by {$sortType} {$sst} "; 

    }else{

        $order_by = " order by distance asc "; 

    }

    if(!$distanceType){
        $distanceMeter = 0.3;
    }else{
        $distanceMeter = $distanceType;
    }

    $positions = array();

    //전체중 거리에서 가까운 순으로
    $sql = sql_query("SELECT * , ( 6371 * ACOS( COS( RADIANS( {$mb_6} ) ) * COS( RADIANS( lat ) ) * COS( RADIANS( lon ) - RADIANS( {$mb_7} ) ) + SIN( RADIANS( {$mb_6} ) ) * SIN( RADIANS( lat ) ) ) ) AS distance FROM store_list having distance <= {$distanceMeter} {$sql_search} and status = '노출' {$order_by} ");

    //echo "SELECT * , ( 6371 * ACOS( COS( RADIANS( {$mb_6} ) ) * COS( RADIANS( lat ) ) * COS( RADIANS( lon ) - RADIANS( {$mb_7} ) ) + SIN( RADIANS( {$mb_6} ) ) * SIN( RADIANS( lat ) ) ) ) AS distance FROM store_list having distance <= {$distanceMeter} {$sql_search} and status = '노출' {$order_by} ";

    for($i=0; $row = sql_fetch_array($sql); $i++){

        $positions['positions'][$i]['lat'] = (float)$row['lat'];
        $positions['positions'][$i]['lng'] = (float)$row['lon'];
    }

    //print_r($positions);
    echo json_encode($positions);
?>