[kakao지도] 지도 중심좌표 부드럽게 이동하기
- Web/JavaScript
- 2023. 1. 13.
KAKAO지도, 지도 중심좌표 부드럽게 이동
kakao 지도 부드럽게 이동하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>지도 이동시키기</title>
</head>
<body>
<div id="map" style="width:100%;height:350px;"></div>
<p>
<button onclick="setCenter()">지도 중심좌표 이동시키기</button>
<button onclick="panTo()">지도 중심좌표 부드럽게 이동시키기</button>
</p>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
function setCenter() {
// 이동할 위도 경도 위치를 생성합니다
var moveLatLon = new kakao.maps.LatLng(33.452613, 126.570888);
// 지도 중심을 이동 시킵니다
map.setCenter(moveLatLon);
}
function panTo() {
// 이동할 위도 경도 위치를 생성합니다
var moveLatLon = new kakao.maps.LatLng(33.450580, 126.574942);
// 지도 중심을 부드럽게 이동시킵니다
// 만약 이동할 거리가 지도 화면보다 크면 부드러운 효과 없이 이동합니다
map.panTo(moveLatLon);
}
</script>
</body>
</html>카카오 지도 LIB 설명서 중, function panTo() { } 라는 함수가 있다.
map.setCenter()와 다르게, map.panTo()는 특정 조건이 맞는다면 지도의 이동 애니메이션을 줄 수 있는 함수이다.
panTo 함수는 움직임을 좋게 만드는 만큼 아쉬움이 있었다.
속도가 조금 더 느리다면, 뭔가 그럴듯한 Effect를 남길 것 같았다.
var moveLatLon = new kakao.maps.LatLng(lat, lon);
map.panTo(moveLatLon, {
animate: {
duration: 550
}
});그리고 조사한 결과, panTo에도 option이 있었다.
animate라는 옵션인데, duration의 숫자를 조절한다면 속도를 조절할 수 있다. 1000 당 1초이다.
반응형
'Web > JavaScript' 카테고리의 다른 글
| [JavaScript] replace 사용하기 (0) | 2023.01.23 |
|---|---|
| [Kakao지도] 지도 배경 변경하기 (0) | 2023.01.15 |
| [OpenLayer] 좌표계 변환하기 (0) | 2023.01.11 |
| [JavaScript] 현재 시간 가져오기 (0) | 2022.12.07 |
| [JavaScript] Optional Operator, Null Error 방지 (0) | 2022.12.01 |