제가 사이트에서 사용자의 위치를 위도, 경도로 받고 그 위치가 중심이 되도록 카카오 맵을 설정하고 싶습니다. 그래서
geolocation을 사용하여 state의 lat, lng에 위도 경도를 각각 저장하고 카카오 맵을 로드할 때 center에
new kakao.maps.LatLng(state.center.lat,state.center.lng)을 넣어서 좌표설정을 해주었으나 잘 작동하지 아니하고
처음 설정한 임시의 위도 경도의 위치로 지도가 설정이 됩니다. 크롬에서 사이트에 대한 위치 접근도 가능하게 만들어 놓았습니다.
임시로 지정한 위치는 위도 경도 33.441, 126.527에 해당하는 위치입니다. 어느 부분이 이상한 것인지 한 번 봐주실 수 있으신가요? 감사합니다.
const [state, setState] = useState({
center: {
lat: 33.441,
lng: 126.527,
},
errMsg: null,
isLoading: true,
});
useEffect(() => {
//카카오맵 스크립트 읽어오기
const my_script = new_script('https://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=45718c240a0f483e77408b48dd737ce1');
//스크립트 읽기 완료 후 카카오맵 설정
if (navigator.geolocation) {
// GeoLocation을 이용해서 접속 위치를 얻어옵니다
navigator.geolocation.getCurrentPosition(
(position) => {
setState((prev) => ({
...prev,
center: {
lat: position.coords.latitude, // 위도
lng: position.coords.longitude, // 경도
},
isLoading: false,
}))
},
(err) => {
setState((prev) => ({
...prev,
errMsg: err.message,
isLoading: false,
}))
}
)
console.log(state.center);
} else {
// HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
setState((prev) => ({
...prev,
errMsg: "geolocation을 사용할수 없어요..",
isLoading: false,
}))
console.log(state.center);
}
my_script.then(() => {
console.log('script loaded!!!');
const kakao = window['kakao'];
kakao.maps.load(() => {
const mapContainer = document.getElementById('map');
const options = {
center: new kakao.maps.LatLng(state.center.lat,state.center.lng), //좌표설정
level: 3
};
const map = new kakao.maps.Map(mapContainer, options); //맵생성
//마커설정
const markerPosition = new kakao.maps.LatLng(state.center.lat,state.center.lng);
const marker = new kakao.maps.Marker({
position: markerPosition
});
marker.setMap(map);
});
});
}, []);