질문드립니다 ㅠㅠ
916
Motazyu Amugoto
작성한 질문수 2
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>
답변 2
8
지금 해보니
웹 플랫폼에
http://localhost:3000 등록하셔야 하고요
영상 찍으신 시점하고는 다르게
javascript는 key 사용하셔야 되는거 같습니다.
0
질문 주셔서 감사합니다:)
늦게 답변 드려 죄송합니다 ㅠㅠㅠ
401 에러의 경우 app key를 잘 못 입력했을 이유가 큽니다.
javascript key를 넣었는지 다시한번 확인해 주시고, 해당 문제가 동일하게 발생했을 시 다시한번 질문 주시기 바랍니다.
감사합니다:)
map API
0
38
1
nodejs 터미널 인식
0
40
1
kakao is not defined 오류
0
420
1
nodemon ./bin/www 입력 시 오류
0
167
1
호스팅 및 도메인 관련
0
161
1
마커이미지가 깨집니다
0
146
2
nodemon설치와 express-generator 오류
0
223
1
코드를 다운받을수 있나요?
0
207
1
SUDO를 계속 입력하지 않는 방법을 알 수 있을까요?
0
604
1
var로 선언하는 이유
0
371
1
Places 코드가 안돼요.
0
355
0
애니메이션 관련 질문
0
274
1
(index):121 Uncaught ReferenceError: kakao is not defined at (index):121:10
0
620
0
히트맵 구성
0
246
0
이벤트리스너 추가부분 질문..
0
301
2
for문 돌릴때 ii 에 대해서 궁금합니다.
1
392
1
express 설정
0
256
0
이름공간 문법?
0
275
0
마커가 안뜹니다
1
322
2
nodemon 설치 에러
0
416
1
AI NAVER API 관련 질문
1
375
2
궁금한게 있어요 link로 연결할때 href에 public 경로를 빼야만 적용되는 이유는 뭔가요??
1
226
0
node와 ncm 의 버전 확인이 안됩니다ㅠㅠ
0
426
1
저장후엔 localhost가 열리지 않네요ㅠ
0
304
0