웹페이지 출력 오류
290
작성한 질문수 2
안녕하세요, 또 질문을 드리게 되었습니다.
오늘 배운 내용을 첨부파일 처럼 작성을 했는데, 실행해보니 웹사이트에 잘 적용이 되지 않네요...
여러 번 돌려보면서 대문자 소문자 철자 이런 것들 확인해보았는데, 혹시 잘못된 것이 있을까요?
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);
}
답변 3
1
앗, 혹시 몰라서 다시 확인해보니 index.ejs 에서 아래 코드가 placeList로 입력되어 있었네요. css도 다 placeList라 적용이 안 되는 것 다 바꾸었습니다!
그런데 강의 중에 placesList 부분은 '플레이시스리스트'라고 말씀해주시면 더 좋을 것 같아요! 자막이랑 화면에 다 있어서 문제는 없지만 저처럼 바보들은 '플레이스리스트' 라고 해주셔서 그냥 아무 생각없이 placelist라고 작성을 했네요... 다음 번엔 좀 더 천천히 꼼꼼하게 코드 작성해보도록 하겠습니다 언제나 빠른 답변 감사드립니다 :)
<div id="placesList"></div>
안녕하세요 선생님 도와주세요
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





