저는 맵 클릭시 동적으로 n개의 마커를 생성하는 좌표를 만들어 컨트롤러로 넘겨주는 작업을 진행하고 있습니다.
문제는 줌 컨트롤시 지도가 제대로 뜨지않고 uncaught TypeError: a.e is not a function 로 시작하는 에러가 무한하게 뜨고 있습니다.
아래는 자바스크립트 소스코드이고 주석처리된 marker.setMap(map); 을 풀면 해당 에러가 발생합니다.
var mapContainer = document.getElementById(‘kakoMap’), // 지도를 표시할 div
mapOption = {
center : new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level : 3
// 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
//controller
var mapTypeControl = new kakao.maps.MapTypeControl();
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
map.addControl(zoomControl, kakao.maps.ControlPosition.Right);
kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
var newPosition = mouseEvent.latLng;
addMarker(newPosition);
$.ajax({
type : "POST",
url : "dymarker/position",
data : {
"lat" : newPosition.getLat(),
"lng" : newPosition.getLng()
},
dataType : "text",
success : function(data) {
console.log(data);
},
error : function() {
alert("ajax error");
}
});
});
var markers = [];
addMarker(new kakao.maps.Marker(map.getCenter()));
// 지도에 마커를 표시합니다
// 지도를 클릭하면 마지막 파라미터로 넘어온 함수를 호출합니다
function addMarker(position) {
var marker = new kakao.maps.Marker({
position : position,
draggable : true, // 마커를 드래그 가능하도록 설정한다
clickable:true
});
//marker.setMap(map);
markers.push(marker);
console.log(markers.length);
}
function send() {
var datas = new Array();
for ( const key in markers) {
var data = {
"lat" : markers[key].getPosition().getLat(),
"lng" : markers[key].getPosition().getLng()
};
datas.push(data);
console.log(markers[key].getPosition().getLat());
}
$.ajax({
type : "POST",
url : "dymarker/mapdata",
data : JSON.stringify(datas),
dataType : "text",
contentType : "application/json",
success : function(value) {
console.log(value);
},
error : function() {
alert("ajax error");
}
});
}
</script>