33,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
지도 마커표시가 안됩니다.
오류는 없는것 같은데, 실행하면 마커가 나오지 않습니다. 다시 처음부터 다시 강의를 들으면서 해봐도 계속 똑같은 오류가 나옵니다. css도 올려봅니다
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
npm install -g express-generator
npm install -g express-generator 이 명령어에서 -g 옵션이 의미하는 게 뭔가요??
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
nodemon ./bin/www 입력시 host 연결이 안됩니다
터미널은 다음과 같이 뜹니다. 어떻게 하면 해결할 수 있을까요
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
AI NAVER API
네이버 클라우드 플랫폼 콘솔창에 들어오니 강의에서 보이는 'AI NAVER API' 섹션이 보이지 않는데 서비스가 종료된건가요?
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
마커 이미지 표시가 안됩니다ㅠ
강의 영상과 똑같이 입력했는데 사진처럼 오류? 엑스박스? 그런 이미지가 나타납니다...
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
스타일이 잘안되는데요. 초보라서 ㅠㅠ
(사진)
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
카카오 api
카카오api의 문제인거 같은데 코딩 실수는 없는거 같은데 무슨 문제인지 여쭤봅니다.
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
마커 표시가 안됩니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>myfirstmap</title> <style> body { padding: 0px !important; margin: 0px !important; } #navbar { height: 50px; width: 100%; background: #262626; color: white; font-weight: bolder; font-size: 25px; display: flex; justify-content: center; align-items: center; } #infoBox { position: absolute; top: 100px; z-index: 10000; background: white; left: 20px; padding: 15px; border: solid 1px #262626; border-radius: 4px; text-align: center; } #infoTitle { font-size: 15px; font-weight: bolder; } .marker { border: solid 1px #000000; background: green; opacity: 0.8; width: 24px; height: 24px; } </style> </head> <body> <div id="navbar">myfirstmap</div> <div id="infoBox"> <div id="infoTitle">현재 날짜</div> <div id="infoContent">2021.05.09</div> </div> <div id="map" style="width:100%;height:100vh;"></div> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=앱키"></script> <script> var container = document.getElementById('map'); var options = { center: new kakao.maps.LatLng(33.396273295560555, 126.4955679259172), level: 3 }; var map = new kakao.maps.Map(container, options); marker = new kakao.maps.Marker({ map: map, position : new kakao.maps.LatLng(33.396273295560555, 126.4955679259172), icon: { content: "<div class='marker'></div>" } }) </script> </body> </html>
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
질문드립니다 ㅠㅠ
GET http://dapi.kakao.com/v2/maps/sdk.js?appkey=3d10a5fa204e2ceb054436e1ce4e1c2a&libraries=services net::ERR_ABORTED 401 (Unauthorized) 오류가 뜹니다 ㅠㅠ 앱키 플랫폼에 로컬호스트 URL을 넣어봤는데도 정상적으로 카카오API를 불러오질 못하네요 ㅠㅠ 뭐가 문제일까요... 도와주시면 감사하겠습니다!! <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <title>myfirstmap</title> <link rel="stylesheet" href="stylesheets/style.css"/> <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=nk3nty8fz7"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3d10a5fa204e2ceb054436e1ce4e1c2a&libraries=services"></script> </head> <body> <!--코로나맵 원페이지뷰로 만들기.--> <div id="navbar">myfirstmap</div> <div id="infoBox"> <div id="infoTitle">현재날짜</div> <div id="infoContent">2021.05.09</div> </div> <div id="search"> <input id="search_input" placeholder="목적지를 입력해주세요"/> <button id="search_button">검색</button> </div> <div id="current">현재위치</div> <div id="map" style="width:100%;height:100vh;"></div> <script type="text/javascript" src="/data/data.js"></script><script> var mapOptions = { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10 }; var map = new naver.maps.Map('map', mapOptions); var markerList = []; var infowindowList = []; for (var i in data) { var target = data[i]; var latlng = new naver.maps.LatLng(target.lat, target.lng); marker = new naver.maps.Marker({ map : map, position : latlng, icon : { content : "<div class='marker'></div>", anchor : new naver.maps.Point(12,12) }, }); /* 자바스크립트에서 작은따옴표 큰따옴표와 비슷한 기능, String값 넣을수있음*/ /* 인포안에 넣을 코드 작성*/ var content = `<div class='infowindow_wrap'> <div class='infowindow_title'>${target.title}</div> <div class='infowindow_content'>${target.content}</div> <div class='infowindow_date'>${target.date}</div> </div>` /* 말풍선 설정 값*/ var infowindow = new naver.maps.InfoWindow({ content : content, backgroundColor : "#00ff0000", borderColor : "#00ff0000", anchorSize : new naver.maps.Size(0,0) }) markerList.push(marker); infowindowList.push(infowindow); } /*클릭이벤트 설정, 클릭했을때 getclickhandler함수가 실행되도록*/ /*즉 클릭하게되면 i번째 마커가 변수에 담기게됨.*/ /*ClickHandler클릭하면 인포윈도우가 열리고 다른 곳 클릭했을때 닫겨야함..*/ /*ClickMap()함수는 인포박스에서 맵을 클릭했을때 자동으로 닫아주는 함수*/ for (var i = 0, ii = markerList.length; i< ii; i++){ naver.maps.Event.addListener(map, "click", ClickMap(i)); naver.maps.Event.addListener(markerList[i],"click",getClickHandler(i)); } function ClickMap(i) { return function() { var infowindow = infowindowList[i]; infowindow.close() } } function getClickHandler(i) { return function() { var marker = markerList[i]; var infowindow = infowindowList[i]; if (infowindow.getMap()){ infowindow.close(); } else { infowindow.open(map, marker) } } } let currentUse = true; $('#current').click(() => { if('geolocation' in navigator){ navigator.geolocation.getCurrentPosition(function(position){ const lat = position.coords.latitude; const lng = position.coords.longitude; const latlng = new naver.maps.LatLng(lat,lng); if (currentUse) { marker = new naver.maps.Marker({ map: map, position: latlng, icon: { content: '<img class="pulse" draggable="false" unselectable="on" src="https://myfirstmap.s3.ap-northeast-2.amazonaws.com/circle.png">', anchor: new naver.maps.Point(11,11), }, }); currentUse = false; } map.setZoom(14, false); map.panTo(latlng); }); } else { alert("위치정보 사용 불가능"); } }); let ps = new kakao.maps.services.Places(); let serach_arr=[] $("#search_input").on("keydown", function(e) { if(e.keyCode === 13){ let content = $(this).val(); ps.keywordSearch(content,placeSearchCB); } }) $("#search_button").on("click", function(e){ let content = $("#search_input").val(); ps.keywordSearch(content, placeSearchCB); }) function placeSearchCB(data,status,pagination) { if(status === kakao.maps.services.Status.OK){ let target = data; const lat = target.y; const lng = target.x; const latlng = new naver.maps.LatLng(lat, lng); marker = new naver.maps.Marker({ position: latlng, map: map, }) if (search_arr.length ==0){ search_arr.push(marker) } else { search_arr.push(marker) let pre_marker = search_arr.splice(0,1); pre_marker[0].setMap(null); } map.setZoom(14, false); map.panTo(latlng); }else{ alert("검색결과가 없습니다.") } } </script> </body> </html>
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
css 연결이 안됩니다.
<link rel="stylesheet" href="../public/stylesheets/style.css" type="text/stylesheet"> 연결이 안됩니다.
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
네이버 지도 api 서비스 종료
네이버 지도 api 서비스가 종료 되었습니다. 그럼 저는 못하는건가요?
- 해결됨코로나맵 개발자와 함께하는 지도서비스 만들기 1
코로나 데이터에 대한 질문과 구현 방법
안녕하세요. 수강완료한 학생?(회사원)입니다. 너무 재밌게 잘 들었습니다. 궁금한게 있어서 글 남겨요. 질문은 2가지 인데요. 1. 실제 코로나 감염자 정보의 데이터는 어디서, 어떻게 가져오시나요? 2. 위의 획득한 코로나 감염자 정보를 가지고, 실제로 저장하시는 db는 aws의 s3를 이용하시는 중이세요? *db를 이용한 데이터 저장방법과 그것을 이용해서 화면에 출력하는 내용은 코로나맵 2번째 강의를 들으려고 합니다. 바쁘신데 죄송하지만 답변 주시면 감사하겠습니다. 수고하세요~
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
터미널에서 인식이 안됩니다
똑같이 했는데도 안됩니다.
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
검색시 오류가 뜹니다.
http://colorscripter.com/s/dPZsrt1 제 코드이구요 똑같이 경희대학교를 검색했을 때 GET http://dapi.kakao.com/v2/local/search/keyword.json?page=1&size=15 400 (Bad Request) 이런 오류가 뜹니다. 한 번 봐 주시면 감사드리겠습니다!
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
지도 api 초기 설정 및 실행 실패
terminal에서 실행 할때마다 syntaxError: unexpected tocken '<' 이라고 나옵니다.
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
마커 색깔변경
안녕하세요 좋은 강의 감사합니다~ㅎㅎ 다름이 아니고 마커를 green색 뿐만 아니라, 다른색깔도 적용해보고 싶습니다. css파일의 .marker를 red;색상으로 바꾸면 전체 마커가 red로 바뀌게 되는데, .marker2 이런식으로 추가하게 되면 index.ejs의 for문은 어떻게 바껴야 하나요? marker2를 다루는 for문이 추가되어야 하는건가요?
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
강의 내용과 별개로 갑자기 궁굼한게 생겨가지구요
안녕하세요 좋은 강의 열심히 들으며 공부중인 수강생입니다. 다름이아니라 사용하는 툴에 대하여 여쭤볼게 있어가지구요. IDE툴을 보면 이클립스도 있고 VisuealStudio도 있고 많고 많은 툴중에서 VSCODE를 사용하는 이유가 혹시 따로 있을까요? 있다면 어떠한 이유때문에 VSCODE로 진행하는지 알고싶습니다.
- 해결됨코로나맵 개발자와 함께하는 지도서비스 만들기 1
질문이 있습니다!
코로나맵을 보고 영감을 받아서 사람들에게 도움이 되는 지도서비스를 만들어보려고 하는 와중에 이 강의를 찾게 되어 얼마나 감사한지 모릅니다. 정말 감사드립니다. 다름이 아니라 서버 이용자 수에 따라 비용이 든다는 것은 전혀 몰랐던 사실인데, 만약 기업들이 지원해준다고 연락이 오지 않았다면 어떻게 해결하실 생각이셨는지 알려주실 수 있을까요?!
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
nodemon ./bin/www 시에 서버가 안열립니다.
PS C:\Users\Administrator\Desktop\myfirstmap> nodemon ./bin/www Usage: nodemon [nodemon options] [script.js] [args] See "nodemon --help" for more. PS C:\Users\Administrator\Desktop\myfirstmap> 라고 뜨고 host에 들어가면은 연결거부 뜹니다..
- 미해결코로나맵 개발자와 함께하는 지도서비스 만들기 1
클릭이벤트가 왜 추가되지 않는지 모르겠습니다.
개발자님, 계속 코드를 다시 봐도 오류를 찾을 수 가 없어서 질문을 올립니다. index.ejs파일에 코드 오류가 없는거 같은데 왜 이벤트 생성이 제대로 안될까요?? <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <title>myfirstmap</title> <link rel="stylesheet" href="/stylesheets/style.css"/> <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=wex4n8j00f"> </script> </head> <body> <div id="navbar">myfirstmap</div> <div id="infoBox"> <div id="infoTitle">현재날짜</div> <div id="infoContent">2020.07.10</div> </div> <div id="map" style="width:100%; height:100vh;"></div> <script type="text/javascript" src="/data/data.js"></script> <script> var mapOptions = { center: new naver.maps.LatLng(37.3595704, 127.105399), zoom: 10, }; var map = new naver.maps.Map('map', mapOptions); var markerList=[]; var infowindowList=[]; for (var i in data){ var target=data[i]; var latlng=new naver.maps.LatLng(target.lat, target.lng); marker=new naver.maps.Marker({ map:map, position:latlng, icon:{ content:"<div class='marker'></div>", anchor: new naver.maps.Point(12,12) }, }); var content=`<div class='infowindow_wrap'> <div class='infowindow_title'>${target.title}</div> <div class='infowindow_content'>${target.content}</div> <div class='infowindow_date'>${target.date}</div> </div>` var infowindow=new naver.maps.InfoWindow({ cotent: content, backgroundColor:"#00ff0000", borderColor: "#00ff0000", anchorSize: new naver.maps.Size(0,0) }) markerList.push(marker); infowindowList.push(infowindow); } for(var i=0,ii=markerList.length; i<ii; i++){ naver.maps.Event.addListener(markerList[i],"click",getClickHandler(i)); } function getClickHandler(i){ return function(){ var marker=markerList[i]; var infowindow=infowindowList[i]; if(infowindow.getMap()){ infowindow.close(); }else{ infowindow.open(map,marker) } } } </script> </body> </html>