[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610
- 현재 사용하고 있는 기능은 현재 좌표 정보로 마커를 생성하고
(navigator.geolocation 기능) - 클릭 시 마커 위치 변경 및
- 좌표로 주소 정보 생성
1번과 2번은 문제가 없으나 3번에서 에러가 납니다.
services.js:5 GET http://dapi.kakao.com/v2/local/geo/coord2address.json?x=126.98224013654932&y=37.567933021764695 401 (Unauthorized)
주소 검색 실패: null
코드는 다음과 같습니다.
function myCallback(result, status) {
if (status === kakao.maps.services.Status.OK) {
var detailAddr = result[0].address.address_name;
console.log(result[0].road_address.address_name);
console.log(result[0].address.address_name);
} else {
console.error(“주소 검색 실패:”, status);
}
}
function searchDetailAddrFromCoords(coords, callback) {
var geocoder = new kakao.maps.services.Geocoder();
// 좌표로 법정동 상세 주소 정보를 요청합니다
geocoder.coord2Address(coords.getLng(), coords.getLat(), callback);
}
function initializeMap(lat=37.49935374626928,lng=127.07442928739694) {
var mapContainer = document.getElementById(‘map’); // 지도를 표시할 div
var mapOption = {
center: new kakao.maps.LatLng(lat,lng), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 지도를 클릭한 위치에 표출할 마커입니다
var marker = new kakao.maps.Marker({
// 지도 중심좌표에 마커를 생성합니다
position: map.getCenter()
});
// 지도에 마커를 표시합니다
marker.setMap(map);
// 지도에 클릭 이벤트를 등록합니다
// 지도를 클릭하면 마지막 파라미터로 넘어온 함수를 호출합니다
kakao.maps.event.addListener(map, ‘click’, function (mouseEvent) {
// 클릭한 위도, 경도 정보를 가져옵니다
var latlng = mouseEvent.latLng;
// 마커 위치를 클릭한 위치로 옮깁니다
marker.setPosition(latlng);
var address = searchDetailAddrFromCoords(latlng, myCallback);
var resultDiv = document.getElementById('location');
resultDiv.value = address;
});
}
function showPosition(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
initializeMap(latitude,longitude)
}
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
alert(“위치 정보를 받아올 수 없습니다.”);
}
}
카카오에서 제공하는 샘플 코드와 거의 동일하게 사용하였습니다. 어디가 문제인가요?