Property ‘DrawingManager’ of undefined 오류

manager = new daum.maps.drawing.DrawingManager(options);

property ‘DrawingManager’ of undefined 오류가 발생합니다.
원인이 무엇일까요>

라이브러리를 로딩하지 않으신 것 같네요.

http://apis.map.daum.net/web/guide/#loadlibrary

위 가이드를 참고하여 수정해 보세요.

appkey=APIKEY&libraries=services,clusterer,drawing
이렇게 선언하였습니다.

잘 하신거 같은데요.

OS와 브라우저 종류/버전을 알려주세요.

그리고
혹시 개발중인 페이지 볼 수 있다거나
전체 코드를 볼 수 있을까요?

win10을 사용하고 있고 브라운저는 IE, 크롬 다 사용하고 있습니다.

Chrome 버전 70.0.3538.77(공식 빌드) (64비트)
IE 버전 11.345.17134.0

image
코… 코드를…

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<link rel="stylesheet" href="/js/jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=APPKEY&libraries=services,clusterer,drawing"></script>
<script type="text/javascript" src="/js/jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="/js/jqwidgets/jqxdata.js"></script>

<style type="text/css">
    .custom_zoomcontrol {position:absolute;top:26px;left:1178px;width:36px;height:80px;overflow:hidden;z-index:1;background-color:#f5f5f5;}
    .custom_zoomcontrol span {display:block;width:36px;height:40px;text-align:center;cursor:pointer;}
    .custom_zoomcontrol span img {width:15px;height:15px;padding:12px 0;border:none;}
    .custom_zoomcontrol span:first-child{border-bottom:1px solid #bfbfbf;}
    .number {font-weight:bold;font-size:13px; color:#ee6152;}
    .length {font-weight:bold;font-size:13px; color:#0000FF;}
</style>

<script type="text/javascript">
    var lat = '${lat}';
    var lng = '${lng}';
    var address = '${address}';
    var key = '${key}';
    var name = '${name}';

    var marker = null;
    var map = null;
    var radius = 0;
    var circle = null;
    var polyData = null;
    var areas = [];
    var overlays = [];
    var customOverlay = null;
    var options = null;
    var manager = null;
    var geocoder = null;
    var lineArr = [];
    var endPoint = null;
    var overlays = [];
    var polygon;
    var selectKey = 0;
    var newFlag = false;
    var editFlag = false;

    var POLYLINE = "polyline";
    var POLYGON = "polygon";

    $(document).ready(function() {
        $('#circleFlag').change(function () {
            displayCircle();
        });

        $('#displayFlag').change(function () {
            displayOverlay();
        });

        init();
    });

    function init() {
        $('#address').val(address);

        for(i = 0; i < codeData.data.brandList.length; i++) {
            var displayName  = codeData.data.brandList[i].brandName + ' - ' + codeData.data.brandList[i].radius + 'm';
            var html = '<option value="' + codeData.data.brandList[i].radius + '">' + displayName + '</option>';
            $('#brandKey').append(html);
        }
        radius = codeData.data.brandList[0].radius;

        $('#brandKey').change(function () {
            radius = $('#brandKey').val();
            displayCircle();
        });

        //다음맵
        var container = document.getElementById('map');
        var options = {
            center: new daum.maps.LatLng(lat, lng),
            level: 6
        };

        map = new daum.maps.Map(container, options);
        customOverlay = new daum.maps.CustomOverlay({});
        options = { // Drawing Manager를 생성할 때 사용할 옵션입니다
            map: map, // Drawing Manager로 그리기 요소를 그릴 map 객체입니다
            drawingMode: [ // Drawing Manager로 제공할 그리기 요소 모드입니다
                POLYLINE,
                POLYGON
            ],
            // 사용자에게 제공할 그리기 가이드 툴팁입니다
            // 사용자에게 도형을 그릴때, 드래그할때, 수정할때 가이드 툴팁을 표시하도록 설정합니다
            guideTooltip: ['draw', 'edit'],
            polylineOptions: { // 선 옵션입니다
                strokeColor: '#db4040', // 선 색
                hintStrokeStyle: 'solid', // 그리중 마우스를 따라다니는 보조선의 선 스타일
                hintStrokeOpacity: 0.5  // 그리중 마우스를 따라다니는 보조선의 투명도
            },
            polygonOptions: {
                editable: true,
                strokeWeight: 3, // 선의 두께입니다
                strokeColor: '#00a0e9', // 선의 색깔입니다
                strokeOpacity: 1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
                strokeStyle: 'solid', // 선의 스타일입니다
                fillColor: '#FFFFFF', // 채우기 색깔입니다
                fillOpacity: 0.0 // 채우기 불투명도입니다
            }
        };
        manager = new daum.maps.drawing.DrawingManager(options);

        // 마커가 표시될 위치입니다
        var markerPosition  = new daum.maps.LatLng(lat, lng);

        // 마커를 생성합니다
        marker = new daum.maps.Marker({
            position: markerPosition
        });

        marker.setTitle(name);
        // 마커가 지도 위에 표시되도록 설정합니다
        marker.setMap(map);

        var iwContent = '<div style="padding:5px;"> ' + name + ' </div>',
            iwPosition = new daum.maps.LatLng(lat, lng); //인포윈도우 표시 위치입니다

        var infowindow = new daum.maps.InfoWindow({
            position : iwPosition,
            content : iwContent
        });

        infowindow.open(map, marker);
        drawData();

        deleteOverlays();
    }

    function drawData() {
        polyData = codeData.data.positionList;

        var key = 0;
        var title = '';
        for(i = 0; i < polyData.length; i++) {
            var data = polyData[i];
            var clickPosition = new daum.maps.LatLng(data.lat, data.lng);
            if(key != data.districtKey) {
                if(i > 0) {	// 다각형 추가
                    var areadata = {"name": title, "path" : path, "key" : key, "polygon" : null};
                    displayArea(areadata);
                    areas.push(areadata);
                }

                polygon = new daum.maps.Polygon({
                    path: [clickPosition],
                    strokeWeight: 3,
                    strokeColor: '#00a0e9',
                    strokeOpacity: 1,
                    strokeStyle: 'solid',
                    fillColor: '#FFFFFF',
                    fillOpacity: 0.0
                });
                key = data.districtKey;
                title = data.districtName;
            }
            else {
                var path = polygon.getPath();
                path.push(clickPosition);
                polygon.setPath(path);
            }
        }
        var path = polygon.getPath();
        var areadata = {"name": title, "path" : path, "key" : key, "polygon" : null};
        displayArea(areadata);
        areas.push(areadata);
    };

    function displayArea(area) {
        var polygon = new daum.maps.Polygon({
            map: map,
            path: area.path,
            strokeWeight: 2,
            strokeColor: '#004c80',
            strokeOpacity: 0.8,
            fillColor: '#FFFFFF',
            fillOpacity: 0.0
        });
        area.polygon = polygon;
        console.log('area.polygon : ', area.polygon);
        overlays.push(polygon);

        daum.maps.event.addListener(polygon, 'mouseover', function(mouseEvent) {
            polygon.setOptions({fillColor: '#FFFFFF', fillOpacity : 0.7});

            customOverlay.setContent('<div class="area">' + area.name + '</div>');

            customOverlay.setPosition(mouseEvent.latLng);
            customOverlay.setMap(map);
            overFlag = true;
        });

        daum.maps.event.addListener(polygon, 'mousemove', function(mouseEvent) {
            customOverlay.setPosition(mouseEvent.latLng);
        });

        daum.maps.event.addListener(polygon, 'mouseout', function() {
            polygon.setOptions({fillColor: '#FFFFFF', fillOpacity : 0.1});
            customOverlay.setMap(null);
            overFlag = false;
        });

        daum.maps.event.addListener(polygon, 'click', function() {
            editpolygon = null;
            var check = confirm("영업지역을 수정하시겠습니까");
            if(check) {
                var path = polygon.getPath();
                manager.put(daum.maps.drawing.OverlayType.POLYGON, path);
                editpolygon = polygon;
                console.log('editpolygon : ', editpolygon);
                for (var i = 0, len = areas.length; i < len; i++) {
                    if(areas[i].polygon == editpolygon) {
                        selectKey = areas[i].key;
                        break;
                    }
                }
                editFlag = true;
                newFlag = false;
            }
        });
    }

    function deleteOverlays() {
        for (var i = 0, len = overlays.length; i < len; i++) {
            overlays[i].setMap(null);
        }
        overlays=[];
    }

    function displayOverlay() {
        if($('#displayFlag').is(':checked') == true) {
            for (var i = 0, len = areas.length; i < len; i++)
                displayArea(areas[i]);
        }
        else {
            deleteOverlays();
        }
    }

    function displayCircle() {
        if(circle != null) {
            circle.setMap(null);
            circle = null;
        }

        if($('#circleFlag').is(':checked') == true) {
            circle = new daum.maps.Circle({
                center : new daum.maps.LatLng(lat, lng),
                radius: radius,
                strokeWeight: 1,
                strokeColor: '#39f',
                strokeOpacity: 1,
                fillColor: '#39f',
                fillOpacity: 0.3
            });
            circle.setMap(map);
        }
    }

    function zoomIn() {
        map.setLevel(map.getLevel() - 1);
    }

    function zoomOut() {
        map.setLevel(map.getLevel() + 1);
    }
</script>

코드는 문제 없는 것 같은데

38

페이지에 접속했을 때
크롬 네트워크 탭에서 drawing.js 가 정상적으로 응답 받고 있는지 확인 가능 하실까요?

load

services.js, clusterer.js, drawing.js 파일이 안 내려옵니다.

?!?!?

혹시… 외부에서 확인 가능한 페이지가 있나요… 진짜 뭐가 잘못되었는지 모르겠는데요?
메세지로 링크 보내주시면 확인해보겠습니다.

해결하였습니다.
baseTemplater.jsp 파일에 스크립트를 선언해주니 정상적으로 처리가 됩니다.
도움을 주셔서 감사합니다.

1개의 좋아요

흠… 아무리 page에 선언했더라도 잘 붙었어야 정상일텐데…

혹시
http://devyongsik.tistory.com/92
이것과 관련된 문제일까요?

정적/동적 include의 차이 때문일 것 같은데

(이 경우라면 이해가 갑니다만… 아니라면 OTL. . .)

daum.maps.event.addListener(polygon, ‘click’, function() {
editpolygon = null;
var check = confirm(“영업지역을 수정하시겠습니까”);
if(check) {
var path = polygon.getPath();
manager.put(daum.maps.drawing.OverlayType.POLYGON, path);
editpolygon = polygon;
console.log('editpolygon : ', editpolygon);
for (var i = 0, len = areas.length; i < len; i++) {
if(areas[i].polygon == editpolygon) {
selectKey = areas[i].key;
break;
}
}
editFlag = true;
newFlag = false;
}
});

다각형을 다시 편집하는 소스가 필요 했는데, 너무나 감사드립니다.