geocoder의 coord2Address를 사용하여 현재 유저의 위치를 geolocation을 통해 받아오고 그 위치에 주소를 나타내려고 하는데 계속 zero result가 나옵니다. 심지어 카카오 본사나 클릭을 통해서도 좌표를 받아와 coord2Address를 해봤는데 전혀 결과값이 나오지 않습니다.
import {useCallback, useEffect, useState} from "react";
import {Map, MapMarker} from "react-kakao-maps-sdk";
import axios from "axios";
function App() {
// const [data, setData] = useState("");
const [location, setLocation] = useState({ lat: 37.5665, lng: 126.9780 });
const [address, setAddress] = useState(null);
const {kakao} = window;
const getData = () => {
axios.get("/api").then(res => {
console.log(res.data)
// setData(res.data)
})
}
const getUserLocation = useCallback(() => {
try {
navigator.geolocation.getCurrentPosition(successGetUserLocation, faillGetUserLocation, {enableHighAccuracy: true});
}
catch (err) {
console.log(err)
}
}, [])
const successGetUserLocation = (res) => {
const lat = res.coords.latitude;
const lng = res.coords.longitude;
console.log({lat,lng})
setLocation({lat,lng})
}
const faillGetUserLocation = (error) => {
console.log(error);
}
const getAddress = useCallback(() => {
const geocoder = new kakao.maps.services.Geocoder();
const coord = new kakao.maps.LatLng(location.lat, location.lng);
const callback = (result, status) => {
console.log(result, status)
if (status === kakao.maps.services.Status.OK) {
setAddress(result[0].address);
console.log(result[0].address.address_name)
}
};
geocoder.coord2Address(coord.getLat(), coord.getLng(), callback);
console.log(coord.getLat(), coord.getLng())
},[kakao.maps.LatLng, kakao.maps.services.Geocoder, kakao.maps.services.Status.OK, location.lat, location.lng]);
const mapClickHandler = (_t, event) => {
console.log(event.latLng);
const geocoder = new kakao.maps.services.Geocoder();
const coord = event.latLng;
const callback = (result, status) => {
if (status === kakao.maps.services.Status.OK) {
console.log("result : " + result)
}
console.log(status);
}
geocoder.coord2Address(coord.getLat(), coord.getLng(), callback)
}
useEffect(() => {
getData()
getUserLocation();
getAddress();
}, [getUserLocation, getAddress]);
return (
<>
<div>
<Map
center={{ lat: location.lat, lng: location.lng }} // 지도의 중심 좌표
style={{ width: '800px', height: '600px' }} // 지도 크기
level={3}
onClick={mapClickHandler}
>
<MapMarker
position={{lat: location.lat, lng: location.lng}}>
</MapMarker>
</Map>
<p>{location.lat} {location.lng}</p>
<p>{address}</p>
</div>
</>
);
}
export default App;