manager = new daum.maps.drawing.DrawingManager(options);
property ‘DrawingManager’ of undefined 오류가 발생합니다.
원인이 무엇일까요>
manager = new daum.maps.drawing.DrawingManager(options);
property ‘DrawingManager’ of undefined 오류가 발생합니다.
원인이 무엇일까요>
appkey=APIKEY&libraries=services,clusterer,drawing
이렇게 선언하였습니다.
잘 하신거 같은데요.
OS와 브라우저 종류/버전을 알려주세요.
그리고
혹시 개발중인 페이지 볼 수 있다거나
전체 코드를 볼 수 있을까요?
win10을 사용하고 있고 브라운저는 IE, 크롬 다 사용하고 있습니다.
Chrome 버전 70.0.3538.77(공식 빌드) (64비트)
IE 버전 11.345.17134.0
코… 코드를…
<%@ 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>
코드는 문제 없는 것 같은데
페이지에 접속했을 때
크롬 네트워크 탭에서 drawing.js 가 정상적으로 응답 받고 있는지 확인 가능 하실까요?
services.js, clusterer.js, drawing.js 파일이 안 내려옵니다.
?!?!?
혹시… 외부에서 확인 가능한 페이지가 있나요… 진짜 뭐가 잘못되었는지 모르겠는데요?
메세지로 링크 보내주시면 확인해보겠습니다.
해결하였습니다.
baseTemplater.jsp 파일에 스크립트를 선언해주니 정상적으로 처리가 됩니다.
도움을 주셔서 감사합니다.
흠… 아무리 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;
}
});
다각형을 다시 편집하는 소스가 필요 했는데, 너무나 감사드립니다.