미해결
코로나맵 개발자와 함께하는 지도서비스 만들기 2
안녕하세요 강사님. ajax관련 질문을 남기고자 합니다.
강사님. 안녕하세요. ajax 관련 질문을 남기고자 합니다.
post는 정상적으로 동작하는데 get이 제대로 동작하지 않습니다 ㅠㅠ
현재 localhost:3000/ 에서 마커가 전혀 보이지 않으며, localhost:3000/location으로 이동해야 등록된 데이터가 json형태로 브라우저에 출력되더군요 ㅠㅠ
ajax는 굉장히 낯설어서 어떻게 해야할지 아예 감을 못잡고 있습니다.
라우터 문제는 아닌 것 같고, 코드도 강사님과 동일한데 무엇이 문제일까요 ㅠㅠ
아래에 소스코드 첨부드립니다. 답변 부탁드리겠습니다 ~!
(ps. const data를 배열로 선언했을 때는 정상적으로 작동하고 있습니다.
또한 콘솔창에 값도 잘 찍히고 있습니다... 근데 마커를 못찍어주고 있습니다...)
var mapOptions = {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 10,
};
var map = new naver.maps.Map("map", mapOptions);
$.ajax({
url: "/location",
type: "GET",
}).done((response) => {
if (response.message !== "success") return;
const data = response.data;
let markerList = [];
let infoWindowList = [];
const getClickHandler = (i) => () => {
const marker = markerList[i];
const infowindow = infoWindowList[i];
if (infowindow.getMap()) {
infowindow.close(); // 인포윈도우 닫기
} else {
infowindow.open(map, marker); // 인포윈도우 열기
}
};
const getClickMap = (i) => () => {
const infowindow = infoWindowList[i];
infowindow.close();
};
for (let i in data) {
const target = data[i];
const latlng = new naver.maps.LatLng(target.lat, target.lng);
let marker = new naver.maps.Marker({
map: map,
position: latlng,
icon : {
content: `<div class="marker"></div>`,
anChor: new naver.maps.Point(7.5, 7.5),
}
});
const content = `
<div class="infowindow_wrap">
<div class="infowindow_title">${target.title}</div>
<div class="infowindow_address">${target.address}</div>
</div>
`
const infowindow = new naver.maps.InfoWindow({
content: content,
backgroundColor: "#00ff0000",
borderColor: "#00ff0000",
anChorSize: new naver.maps.Size(0, 0),
});
markerList.push(marker);
infoWindowList.push(infowindow);
}
for (let i = 0, ii = markerList.length; i < ii; i++) {
naver.maps.Event.addListener(markerList[i], "click", getClickHandler(i));
naver.maps.Event.addListener(map, "click", getClickMap(i));
}
});