inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

코로나맵 개발자와 함께하는 지도서비스 만들기 2

지도 위에 저장한 데이터 표시하기

안녕하세요 강사님. ajax관련 질문을 남기고자 합니다.

335

cef5787

작성한 질문수 2

1

강사님. 안녕하세요. 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));
    
    }
});

ajax오류 nodejs express 웹앱 mongodb mongoose

답변 1

0

이동훈

안녕하세요 질문 주셔서 감사합니다:)

서버쪽 코드를 확인해봐야 할 것 같습니다~!!

혹시 router쪽 코드도 첨부해 주실 수 있을까요?

감사합니다.

안녕하세요 선생님 도와주세요

0

138

1

marker 크기 관련 질문

0

120

0

upload.css 관련 질문

0

106

1

mongoDB 관련 질문

0

154

1

키워드 검색 데이터 받아오기 강의중 문제 발생

0

246

1

404에러가 뜨네요 ㅠㅠ

1

370

1

카카오 api 발급 및 적용중에 upload 페이지가 뜨지를 않아서요.

0

259

1

키 발급 부탁드립니당!!

0

183

0

코드를 다운받을 수 있는 곳이 있나요?

0

208

0

서버 구축

0

304

0

인포박스가 생성되지 않아요

1

381

2

infowindow_wrap부터 css가 적용이 안돼요

0

249

0

화살표 함수 두번 쓰는 이유가 궁금합니다.

3

226

0

이거 좀 너무 "코드보고 따라치세요" 식 아닌가요?

3

243

1

마커 클러스터 내의 텍스트 속성 지정 방법이 궁금합니다.

0

336

1

로딩 속도를 높이는 방법이 궁금합니다.

0

280

1

헉! 저도 회원가입에서 막혔네요

1

210

1

-g로 설치하는 이유가 있나요?

1

190

1

강의 내용 외 문의

0

176

0

마커 기능 질문

1

170

1

script 태그에 있는 클라이언트 아이디가 github에 공개되지 않도록 올리는 방법이 있을까요?

1

430

1

웹 관련 문의

1

256

1

서버접속시 오류가 발생하네요

1

226

2

지도정보 표시

1

347

1