안녕하세요
https://apis.map.kakao.com/web/sample/addr2coord/
해당 링크의 예제를 똑같이 가져와서 index.html를 만들고 테스트를 했는데
하단 에러가 response 되서 장소로 이동이 안되는 문제가 있습니다.
// 20221123155050
// http://dapi.kakao.com/v2/local/search/address.json?query=%EC%84%9C%EC%9A%B8%ED%8A%B9%EB%B3%84%EC%8B%9C%20%EC%84%9C%EC%B4%88%EA%B5%AC%20%EC%8B%A0%EB%B0%98%ED%8F%AC%EB%A1%9C%20306%20(%EB%B0%98%ED%8F%AC%EB%8F%99%2C%20%EC%84%9C%EC%9A%B8%EB%B9%8C%EB%94%A9)&page=1&size=10
{
"errorType": "AccessDeniedError",
"message": "cannot find Authorization : KakaoAK header"
}
주소 API 기능은 동작합니다.
해당 KakaoAK header이 없다고 나오면서
제가 검색한 페이지로는 이동이 안되더라고요.
찾아보니 KakaoAK header는 카카오 로컬 API로 헤더에 Appkey를 넣어야하는데
샘플링 코드에는 앱키를 따로 넣는곳을 확인하지 못했습니다.
(처음에 자바스크립트 키 넣는곳 제외하고요)
어떻게 해야 작동이 가능할까요?
샘플링 코드지만 제가 사용했던 코드 같이 송부드립니다.
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=yes\'>
<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=실제로는 여기에 키 넣었습니다&libraries=services"></script>
</head>
<body style="padding:0; margin:0;">
<div id='map' style="width:100%;height:100%;min-width:400px;min-height:1000px;"/>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
geocoder.addressSearch('서울특별시 서초구 신반포로 306 (반포동, 서울빌딩)', function(result, status) {
console.log(result, status)
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new kakao.maps.Marker({
map: map,
position: coords
});
// 인포윈도우로 장소에 대한 설명을 표시합니다
var infowindow = new kakao.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">우리회사</div>'
});
infowindow.open(map, marker);
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
}
});
</script>
</body>
</html>
감사합니다