inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

키워드 검색 데이터 지도위에 표시하기

웹페이지 출력 오류

290

연잉

작성한 질문수 2

1

안녕하세요, 또 질문을 드리게 되었습니다.

오늘 배운 내용을 첨부파일 처럼 작성을 했는데, 실행해보니 웹사이트에 잘 적용이 되지 않네요...

여러 번 돌려보면서 대문자 소문자 철자 이런 것들 확인해보았는데, 혹시 잘못된 것이 있을까요?

const mapContainer = document.getElementById("map");
const mapOption = {
    center : new daum.maps.LatLng(37.554477, 126.97041),
    level : 3,
};

let map = new daum.maps.Map(mapContainer, mapOption);

let infowindow = new daum.maps.InfoWindow({
    zIndex: 1,
});

let markerList = [];

let ps = new daum.maps.services.Places();

searchPlaces();

function searchPlaces() {
    let keyword = $("#keyword").val();
    ps.keywordSearch(keyword, placesSearchCB);
}

function placesSearchCB(data, status) {
    if (status === daum.maps.services.Status.OK) {
        displayPlaces(data);
    }else if (status === daum.maps.services.Status.ZERO_RESULT) {
        alert("검색 결과가 존재하지 않습니다")
        return;
    }else if (status === daum.maps.services.Status.ERROR) {
        alert("검색 결과중 오류가 발생했습니다")
        return;
    }
}

function displayPlaces(data) {
    let listEl = document.getElementById("placesList");
    let bounds = new daum.maps.LatLngBounds();

    for (let i = 0; i < data.length; i++) {
        let lat = data[i].y;
        let lng = data[i].x;
        let address_name = data[i]["address_name"];
        let place_name = data[i]["place_name"];

        const placePosition = new daum.maps.LatLng(lat, lng);
        bounds.extend(placePosition);

        let marker = new daum.maps.Marker({
            position : placePosition,
        });

        marker.setMap(map);
        markerList.push(marker);

        const el = document.createElement("div");
        const itemStr = `
            <div class="info">
                <div class="info_title">
                    ${place_name}
                </div>
                <span>${address_name}</span>
            </div>
        `;

        el.innerHTML = itemStr;
        el.className = "item";

        daum.maps.event.addListener(marker, "click", function(){
            displayInfowindow(marker, place_name, address_name, lat, lng);
        });

        daum.maps.event.addListener(map, "click", function() {
            infowindow.close();
        });

        el.onclick = function () {
            displayInfowindow(marker, place_name, address_name, lat, lng);
        };

        listEl.appendChild(el);
    }
    map.setBounds(bounds);
}

function displayInfowindow(marker, place_name, address_name, lat, lng){
    let content = `
    <div style="padding:25px;">
        ${place_name}<br>
        ${address_name}<br>
        <button>등록</button>
    </div>
    `;
    map.panTo(marker.getPosition());
    infowindow.setContent(content);
    infowindow.open(map, marker);
}

웹앱 express nodejs mongodb mongoose

답변 3

1

이동훈

잘 해결되았다니 다행이네요 ㅎㅎ

주신 피드백 꼭 반영하도록 하겠습니다~!!

감사합니다:)

1

연잉

앗, 혹시 몰라서 다시 확인해보니 index.ejs 에서 아래 코드가 placeList로 입력되어 있었네요. css도 다 placeList라 적용이 안 되는 것 다 바꾸었습니다! 

그런데 강의 중에 placesList 부분은 '플레이시스리스트'라고 말씀해주시면 더 좋을 것 같아요! 자막이랑 화면에 다 있어서 문제는 없지만 저처럼 바보들은 '플레이스리스트' 라고 해주셔서 그냥 아무 생각없이 placelist라고 작성을 했네요... 다음 번엔 좀 더 천천히 꼼꼼하게 코드 작성해보도록 하겠습니다 언제나 빠른 답변 감사드립니다 :)

<div id="placesList"></div>

1

이동훈

질문 감사합니다:)

혹시 index.ejs 코드도 스크린샷 보내주실 수 있나요??

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

0

139

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

244

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

227

2

지도정보 표시

1

348

1