안녕하세요, 현재 카테고리로 주변 병원을 검색해서 마킹하는 프로그램을 개발중입니다. 그러나 categorysearch 로 카테고리별 검색을 하려 할때마다 웹에서
GET http://dapi.kakao.com/v2/local/search/category.json?category_group_code=HP8&x=127.06428086281801&y=37.50084636415428&radius=2000&page=1&size=15 401 (Unauthorized)
401 에러가 납니다. 지도를 부를때 API 키가 작동한다는 사실이 확인이 되고, 심지어 categorysearch를 이용할때 따로 API키를 첨부하는데도 불구하고, 계속 이 에러가 납니다. 검색으로 여러 블로그, 카카오 데브톡 게시물들을 모두 참고해보았는데도 단 하나도 작동하지 않았습니다… Kakao Maps API에 카테고리별 검색 예시를 보고 그대로 코드를 사용했는데도 똑같이 401에러가 나오네요. 혹시 해결책이 있을까요?
(아래는 에러가 나는 코드입니다. 코드가 좀 깨지네요)
밑에 주석처리된 코드들도 전부 해봤다가 똑같이 401에러가 발생했습니다.
<link rel="stylesheet" href="style.css">
<title>Momentum</title>
<style>
.rectang {
width: 700px;
height: 700px;
flex-shrink: 0;
border-radius: 13px;
background: rgb(212, 81, 81);
}
.rectangle {
width: 1100px;
height: 70px;
flex-shrink: 0;
border-radius: 13px;
background: rgba(0, 0, 0, 0.10);
}
.rectangl {
width: 1950px;
height: 795px;
flex-shrink: 0;
border-radius: 13px;
background: rgba(0, 0, 0, 0.10);
}
</style>
// 현재위치 구하기
navigator.geolocation.getCurrentPosition(success, error);
function success(position) {
const apiKey = 'b946892e84c9806f0120830aa59c76f8';
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const mapContainer = document.getElementById('map');
const options = {
center: new kakao.maps.LatLng(latitude, longitude),
level: 5
};
const map = new kakao.maps.Map(mapContainer, options);
const ps = new kakao.maps.services.Places(map);
ps.categorySearch('HP8', placesSearchCB, {
location: new kakao.maps.LatLng(latitude, longitude),
useMapCenter: true,
radius: 2000,
appkey: apiKey // API 키를 직접 전달
});
function placesSearchCB(data, status, pagination) {
if (status === kakao.maps.services.Status.OK) {
for (let i = 0; i < data.length; i++) {
displayMarker(data[i]);
}
}
}
function displayMarker(place) {
const marker = new kakao.maps.Marker({
map: map,
position: new kakao.maps.LatLng(place.y, place.x)
});
kakao.maps.event.addListener(marker, 'click', function () {
const infowindow = new kakao.maps.InfoWindow({
content: '<div style="padding:5px;font-size:12px;">' + place.place_name + '</div>'
});
infowindow.open(map, marker);
});
}
}
function error(err) {
console.warn(`ERROR(${err.code}): ${err.message}`);
if (err.code === 1) {
alert('사용자가 위치 정보 사용을 거부했습니다. 위치 정보를 사용하려면 설정에서 허용해주세요.');
}
}
// var places = new kakao.maps.services.Places();
// var callback = function(result, status) {
// if (status === kakao.maps.services.Status.OK) {
// console.log(result);
// }
// };
// places.keywordSearch('병원', callback);
// // 장소 검색 객체를 생성합니다
// var ps = new kakao.maps.services.Places(map);
// // 카테고리로 병원을 검색합니다
// ps.categorySearch('HP8', placesSearchCB, {useMapBounds:true});
// // 키워드 검색 완료 시 호출되는 콜백함수 입니다
// function placesSearchCB (data, status, pagination) {
// if (status === kakao.maps.services.Status.OK) {
// for (var i=0; i<data.length; i++) {
// displayMarker(data[i]);
// }
// }
// }
// // 지도에 마커를 표시하는 함수입니다
// function displayMarker(place) {
// // 마커를 생성하고 지도에 표시합니다
// var marker = new kakao.maps.Marker({
// map: map,
// position: new kakao.maps.LatLng(place.y, place.x)
// });
// // 마커에 클릭이벤트를 등록합니다
// kakao.maps.event.addListener(marker, 'click', function() {
// // 마커를 클릭하면 장소명이 인포윈도우에 표출됩니다
// infowindow.setContent('<div style="padding:5px;font-size:12px;">' + place.place_name + '</div>');
// infowindow.open(map, marker);
// });
// }
</script>