그누보드 카카오 맵 연동 (2) #

var plugin_url = "<?=BV_MAP_PLUGIN_URL?>";
  
var current_latitude = '';
var current_longitude = '';
var kakaoMap = '';
var kakaoMarkers = [];
var kakaoMarkerCluster = '';
var kakaoCustomOverlays = [];
  
var latlng_bounds = '';
  
var latlng_north_east,
    latlng_south_west,
    max_map_latitude,
    max_map_longitude,
    min_map_latitude,
    min_map_longitude;
  
function ajaxMapLoad(){
    kakaoMap = map;
  
    for(i=0; i<kakaoMarkers.length; i++){
        kakaoMarkers[i].setMap(null);
    }
    for(i=0; i<kakaoCustomOverlays.length; i++){
        kakaoCustomOverlays[i].setMap(null);
    }
  
    kakaoMarkers = [];
    kakaoCustomOverlays = [];
  
    if(kakaoMap){
        latlng_bounds = kakaoMap.getBounds();
        latlng_north_east = latlng_bounds.getNorthEast();
        latlng_south_west = latlng_bounds.getSouthWest();
        max_map_latitude = latlng_north_east.getLat();
        max_map_longitude = latlng_north_east.getLng();
        min_map_latitude = latlng_south_west.getLat();
        min_map_longitude = latlng_south_west.getLng();
    }
  
    let ajax_data = {
        'min_map_latitude':min_map_latitude,
        'max_map_latitude':max_map_latitude,
        'min_map_longitude':min_map_longitude,
        'max_map_longitude':max_map_longitude,
    };
  
    $.ajax({
        type: 'post',
        url: plugin_url + '/get_map_data.php',
        data: ajax_data,
        dataType:'html',
        success: function (data) {
            let response = $(data);
            $('.map_list').html(response.find('.map_list .wrapper'));
  
            ajaxMenuLoad(ajax_data);
        }
    });
}
  
  
  
function ajaxMenuLoad(ajax_data) {
    $.ajax({
        type: 'post',
        url: plugin_url + '/get_list_data.php',
        data: ajax_data,
        dataType:'json',
        success: function (data) {
            $.each(data.result,function(i,item){
                let latitude = parseFloat(item.latitude);
                let longitude = parseFloat(item.longitude);
                kakaoMarkers[i] = new kakao.maps.Marker({
                    position: new kakao.maps.LatLng(latitude, longitude)
                });
                kakaoMarkers[i].setMap(kakaoMap);
                kakao.maps.event.addListener(kakaoMarkers[i], 'click', function() {
                    kakaoCustomOverlays[i].setMap(kakaoMap);
                });
                kakaoCustomOverlays[i] = new kakao.maps.CustomOverlay({
                    position: new kakao.maps.LatLng(latitude, longitude),
                    content: `
                        <div class="kakao_custom_overlay">
                            <div class="map_item_overlay_html">
                                <a class="list_item" href="${item.href}" target="_blank">
                                    <div class="thumb_area">
                                        <img class="thumb" src="${item.bf_thumburl}" width="${item.bf_width}" height="${item.bf_height}" />
                                    </div>
                                    <div class="content_area">
                                        <div class="title">
                                            ${item.shop_name}
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <span class="arrow"></span>
                        </div>`
                });
            });
            if(kakaoMarkerCluster){
                kakaoMarkerCluster.clear();
            }
  
            kakaoMarkerCluster = new kakao.maps.MarkerClusterer({
                map: kakaoMap,
                averageCenter: true,
                minLevel: 1,
                gridSize: 60,
                disableClickZoom: true,
                calculator: [9, 99, 999, 9999,99999],
                styles: [{
                    width : '50px',
                    height : '50px',
                    background: 'rgba(126, 142, 227, .7)',
                    borderRadius: '28px',
                    color: '#FFF',
                    textAlign: 'center',
                    fontWeight: 'bold',
                    fontSize: '20px',
                    lineHeight: '50px',
                    border: '2px solid rgba(126, 142, 227, .9)'
                },
                    {
                        width : '56px',
                        height : '56px',
                        background: 'rgba(255, 134, 74, .7)',
                        borderRadius: '31px',
                        color: '#FFF',
                        textAlign: 'center',
                        fontWeight: 'bold',
                        fontSize: '20px',
                        lineHeight: '56px',
                        border: '2px solid rgba(255, 134, 74, .9)'
                    },
                    {
                        width : '60px',
                        height : '60px',
                        background: 'rgba(255, 72, 50, .7)',
                        borderRadius: '33px',
                        color: '#FFF',
                        textAlign: 'center',
                        fontWeight: 'bold',
                        fontSize: '18px',
                        lineHeight: '60px',
                        border: '2px solid rgba(255, 72, 50, .9)'
                    },
                    {
                        width : '60px',
                        height : '60px',
                        background: 'rgba(217, 84, 189, .7)',
                        borderRadius: '33px',
                        color: '#FFF',
                        textAlign: 'center',
                        fontWeight: 'bold',
                        fontSize: '18px',
                        lineHeight: '60px',
                        border: '2px solid rgba(217, 84, 189, .9)'
                    },
                    {
                        width : '60px',
                        height : '60px',
                        background: 'rgba(147, 84, 217, .7)',
                        borderRadius: '33px',
                        color: '#FFF',
                        textAlign: 'center',
                        fontWeight: 'bold',
                        fontSize: '18px',
                        lineHeight: '60px',
                        border: '2px solid rgba(147, 84, 217, .9)'
                    }
                ]
            });
            kakaoMarkerCluster.addMarkers(kakaoMarkers);
            kakao.maps.event.addListener(kakaoMarkerCluster, 'clusterclick', function(cluster) {
  
                var latlng_bounds = cluster.getBounds();
                latlng_north_east = latlng_bounds.getNorthEast();
                latlng_south_west = latlng_bounds.getSouthWest();
                max_map_latitude = latlng_north_east.getLat();
                max_map_longitude = latlng_north_east.getLng();
                min_map_latitude = latlng_south_west.getLat();
                min_map_longitude = latlng_south_west.getLng();
  
                let ajax_data = {
                    'min_map_latitude':min_map_latitude,
                    'max_map_latitude':max_map_latitude,
                    'min_map_longitude':min_map_longitude,
                    'max_map_longitude':max_map_longitude,
                };
  
                $.ajax({
                    type: 'post',
                    url: plugin_url + '/get_map_data.php',
                    data: ajax_data,
                    dataType:'html',
                    success: function (data) {
                        let response = $(data);
                        $('.map_list').html(response.find('.map_list .wrapper'));
                    }
                });
            });
  
        },
        error: function (request, status, error) {
            console.log('code: '+request.status+"\n"+'message: '+request.responseText+"\n"+'error: '+error);
            return false;
        }
    })
}
  
var marker = '';
var container = document.getElementById('map');
var position = new kakao.maps.LatLng(37.493619044107106, 127.06653626780998);
var options = {
    center: position,
    level: 14,
    disableDoubleClick: false,
    disableDoubleClickZoom: false,
    draggable: true
};
var map = new kakao.maps.Map(container, options);
var mapTypeControl = new kakao.maps.MapTypeControl();
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
  
  
ajaxMapLoad();
  
kakao.maps.event.addListener(map, 'idle', function() {
    if(marker) marker.setMap(null);
    ajaxMapLoad();
});
  
  
function getCurrentPositionEvent() {
    //GPS를 지원하면
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            current_latitude = position.coords.latitude;
            console.log(current_latitude);
            current_longitude = position.coords.longitude;
            //카카오지도 현위치를 센터로
            if(map){
                var change_position = new daum.maps.LatLng(current_latitude, current_longitude);
                map.setCenter(change_position);
            }
        }, function error(e) {
            if(e.code==1){
                alert('사용자가 위치정보 권한을 제공하지 않습니다.');
            } else if(e.code==2){
                alert('브라우저가 위치를 가져올 수 없습니다.');
            } else if(e==3){
                alert(e.code);
            } else {
                alert(e.message);
            }
        }, {
            enableHighAccuracy: true,
            maximumAge: 0,
            timeout: 2000
        });
    }
    //GPS를 지원하지 않으면
    else {
        alert('현위치 기능을 사용할 수 없습니다. 현위치 접근권한이 있는지 확인하시기 바랍니다.');
    }
}
$(document).ready(function(){
    $('body').attr('oncontextmenu','return false');
    $('body').attr('ondragstart','return false');
    $('body').attr('onselectstart','return false');
});