oqpo-view/src/main/webapp/js/app/kakao.map.js

let kakaoMap = {
    init: function(id, locate, latX, longY) {
        this.formId = id;
        this.load(locate, latX, longY);
    },
    geocoder: null,
    schDetailAddrFromCoords: function(coords, callback) {
        // 좌표로 법정동 상세 주소 정보를 요청합니다
        if(this.geocoder) {
            this.geocoder.coord2Address(coords.getLng(), coords.getLat(), callback);
        }
    },
    getMap: function(id) {
        var mapContainer = document.getElementById(id), // 지도를 표시할 div
            mapOption = {
                center: new kakao.maps.LatLng(37.56684, 126.97865), // 지도의 중심좌표
                level: 3, // 지도의 확대 레벨
                mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
            };

        // 지도를 생성한다
        var map = new kakao.maps.Map(mapContainer, mapOption);

        // 마우스 휠과 모바일 터치를 이용한 지도 확대, 축소를 막는다
        map.setZoomable(false);

        // 지도에 확대 축소 컨트롤을 생성한다
        //var zoomControl = new kakao.maps.ZoomControl();

        // 지도의 우측에 확대 축소 컨트롤을 추가한다
        //map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);

        return map;
    },
    marker: function(map, coords) {
        // 지도에 마커를 생성하고 표시한다
        marker = new kakao.maps.Marker({
            position: coords, // 마커의 좌표
            map: map // 마커를 표시할 지도 객체
        });
    },
    load: function(locate, latX, longY) {
        var _this = this;
        kakao.maps.load(function() {
            var map = _this.getMap(_this.formId + '_MAP');
            // 주소-좌표 변환 객체를 생성합니다
            _this.geocoder = new kakao.maps.services.Geocoder();
            var mapMoveFn = function(result) {
                var coords = new kakao.maps.LatLng(result.y, result.x);
                if(_this.formId.lastIndexOf('DETAIL') > -1) {
                    document.getElementById(_this.formId + '_LAT').value = result.y;
                    document.getElementById(_this.formId + '_LNG').value = result.x;
                }

                // 결과값으로 받은 위치를 마커로 표시합니다
                _this.marker(map, coords);

                // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
                map.setCenter(coords);
            };
            if((latX && longY) && (latX !== '' && longY !== '')) {
                mapMoveFn({'x':longY, 'y':latX});
            } else {
                if(!locate || locate.length == 0 ) {
                    // 지도에 마커를 생성하고 표시한다
                    _this.marker(map, new kakao.maps.LatLng(37.56684, 126.97865));
                } else {
                    // 주소로 좌표를 검색합니다
                    _this.geocoder.addressSearch(locate, function(result, status) {
                        // 정상적으로 검색이 완료됐으면
                        if (status === kakao.maps.services.Status.OK) {
                            mapMoveFn(result[0]);
                        } else {
                            _this.marker(map, new kakao.maps.LatLng(37.56684, 126.97865));
                        }
                    });
                }
            }

            if(_this.formId.lastIndexOf('DETAIL') > -1) {
                _this.listener.drag(map);
            }
        });
    },
    listener: {
        drag: function(map) {
            // 지도 드래깅 이벤트를 등록한다 (드래그 시작 : dragstart, 드래그 종료 : dragend)
            kakao.maps.event.addListener(map, 'drag', function () {
                kakaoMap.schDetailAddrFromCoords(map.getCenter(), function(result, status) {
                    if (status === kakao.maps.services.Status.OK) {

                        document.getElementById(kakaoMap.formId + '_LOTS_ADDRESS').value = result[0].address.address_name ;
                        document.getElementById(kakaoMap.formId + '_ADRES').value = !!result[0].road_address ? result[0].road_address.address_name : result[0].address.address_name ;
                        document.getElementById(kakaoMap.formId + '_STREET_ADDRESS').value = !!result[0].road_address ? result[0].road_address.address_name : $('#' + this.formId + '_STREET_ADDRESS').val();
                        document.getElementById(kakaoMap.formId + '_ZIPNO').value = !!result[0].road_address ? result[0].road_address.zone_no : $('#' + this.formId + '__CMPY_ZIPNO').val() ;
                        document.getElementById(kakaoMap.formId + '_LAT').value = map.getCenter().getLat();
                        document.getElementById(kakaoMap.formId + '_LNG').value = map.getCenter().getLng();

                        // 마커를 클릭한 위치에 표시합니다
                        marker.setPosition(map.getCenter());
                        marker.setMap(map);
                    }
                });
                /* 	var message = '지도를 드래그 하고 있습니다. 지도의 중심 좌표는 ' + map.getCenter().toString() +' 입니다.';
                console.log(message); */
            });
        }
    },
    address: function() {
        var _this = this;
        new daum.Postcode({
            oncomplete: function(data) {
                // 전체주소 리턴
                document.getElementById(kakaoMap.formId + '_ZIPNO').value = data.zonecode;
                document.getElementById(kakaoMap.formId + '_ADRES').value = data.roadAddress;
                document.getElementById(kakaoMap.formId + '_LOTS_ADDRESS').value = !!data.autoJibunAddress ? data.autoJibunAddress : data.jibunAddress;
                document.getElementById(kakaoMap.formId + '_STREET_ADDRESS').value = data.roadAddress;
                document.getElementById(kakaoMap.formId + '_HJ_DONG').value = !!data.hname ? data.hname : data.bname;
                document.getElementById(kakaoMap.formId + '_BJ_DONG').value = data.bname;

                _this.init(kakaoMap.formId, data.roadAddress);
                document.getElementById(kakaoMap.formId + '_ADRES_DTL').focus();
            }
        }).open();
    },
    simpleAddress: function (formId) {
        new daum.Postcode({
            oncomplete: function(data) {
                // 전체주소 리턴
                document.getElementById(formId + '_ZIPNO').value = data.zonecode;
                document.getElementById(formId + '_ADRES').value = data.roadAddress;
                document.getElementById(formId + '_ADRES_DTL').focus();
            }
        }).open();
    }
};