[React] 카카오 Map API - setCenter
0. 결과물
1. 지도의 동적 조작(setCenter)
보통 지도를 이용할 때, 목록에 있는 항목을 누르면 그 항목이 중심에 위치하게 지도가 움직이게 된다.
이를 위한 기능을 제공하는데,
https://apis.map.kakao.com/web/documentation/#Map_setCenter
카카오 Map에서 제공하는건 위와 같은 함수가 있다.
주의할 점은 위도, 경도
를 바로 넣어주면 안되고, LatLng
라는 타입으로 해줘야한다
그리고 한참 고생했던 부분은
범위를 이탈한 위도 경도를 넣으면 setCenter함수가 먹통이된다
화면이 로드될 때, 기본값으로 new kakao.maps.LatLng(0,0)
과 같은 행위를 의도하지 않게 수행하고 있었는데, 이 때문에 에러가 나는데, 그 메세지가
setCenter 함수를 전혀 모르고 있는것 처럼 나온다..
그래서 카카오 맵에서 제공하는 위도와 경도의 범위에 있을 때에만 setCenter함수를 호출하도록 했다.
(우리나라 정도만 관리하는것 같아서 검색해서 나온 결과대로 위도 33~43 / 경도 124~132 정도 폭넓게 설정)
if(lat <= MAXLAT && lat >= MINLAT && lng >= MINLNG && lng <= MAXLNG) Map.setCenter(new kakaoAPI.LatLng(lat, lng))
좀 더 멋진 방법이 있을 수 있는데, 우선은 위와 같이 처리..
2. 지도의 동적 조작(setLevel)
중심점 잡는것 보다는 수월하게 동작하였다.
setLevel에 숫자값으로 쉽게 제어 가능하였다
단, 적절한 레벨설정이 오히려 문제였다.
동선이 모두 보여야하기 때문에,
위도나 경도 값 중 큰 값에 따라 특정 범위 내에 있는 경우 레벨이 결정되는 식으로 생각했다
예를들어,
0 ~ 10 : 1레벨
11 ~ 30 : 2레벨
31 ~ 100 : 3레벨
...
이런식인데, 1부터 14레벨까지 있고, 범위가 끊어지는 지점이 명확하지도 않아서 적당한 값을 임의로 설정해야했다.
3. 소스
Map.js 소스 전체는 의미없어서 함수만
const onCoordinateHandler = (x1, x2, y1, y2) => {
var lat = (x2+x1)/2
var lng = (y2+y1)/2
var chkLevel = (x2-x1) > (y2-y1) ? (x2-x1) : (y2-y1)
if(lat <= MAXLAT && lat >= MINLAT && lng >= MINLNG && lng <= MAXLNG) {
var level
if(chkLevel < 0.007) level = 4
else if(chkLevel < 0.015) level = 5
else if(chkLevel < 0.05) level = 6
else if(chkLevel < 0.09) level = 7
else if(chkLevel < 0.15) level = 8
else if(chkLevel < 0.3) level = 9
else if(chkLevel < 0.9) level = 10
else if(chkLevel < 2) level = 11
else level = 12
Map.setLevel(level)
Map.setCenter(new kakaoAPI.LatLng(lat, lng))
}
}
Author And Source
이 문제에 관하여([React] 카카오 Map API - setCenter), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@upisdown/React-카카오-Map-API-setCenter저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)