[Javascript / API] 입력한 좌표값(Input)으로 카카오맵 API 마커 위치 변경/이동하기(좌표 정규식 포함)

프로젝트를 진행하면서 카카오맵 API를 통해서 좌표값으로 맵과 마커를 출력하는 기능을 구현해야했다.

 

▼▼▼ 아래 글과 같이 출력 자체는 어려운 부분이 없었다.

 

[Javascript / HTML5] 카카오맵 API 연동으로 좌표 및 마커 표시하기 A to Z (에러 포함)

 

하지만, 언제나 프로젝트 기능 구현은 API 문서에 나와있는 그대로 이루어질 수가 없다...

 

단순한 클릭이벤트와는 별개로 Input 값을 직접 입력했을 때, 마커의 위치를 이동시키는 기능이 필요했다.

그렇게 작성한 Javascript 코드를 정리할 겸 글을 작성해본다.

 

 

[ 해결 방법 ]

 

ⓐ HTML 작성 ▼

 

우선, JSP/HTML로 map을 그릴 div가 필요하다.

다음으로는 위도, 경도 좌표값을 입력받을 input이 각각 필요하다.

마지막으로 입력했을 때, 마커를 이동시키기 위해 oninput 이벤트로 뒤에 작성할 chgLoc 메소드를 걸어주었다.

 

<!-- JSP / HTML -->
<div id="divMap" style="width:100%; height:500px;"></div>

<label for="lat">
	위도 : 
    <input type="text" id="lat" oninput="chgLoc();"/>
</label>
<label for="lon">
	경도 : 
    <input type="text" id="lon" oninput="chgLoc();"/>
</label>

 

 

ⓑ 카카오맵 지도 생성(상세 설명 생략 : 이전 글 참고) ▼

 

<!-- Javascript -->
const mapContainer = document.getElementById('divMap'),
	mapOption = { 
		center: new kakao.maps.LatLng(36.5,127.8),	// 지도의 중심좌표
		level: 13					// 지도의 확대 레벨
	};
		 
const map = new kakao.maps.Map(mapContainer, mapOption);	//지도 생성

 

 

ⓒ chgLoc 메소드 작성 ▼

 

※ 주의점은 map, marker는 전역변수로 선언(동일한 오브젝트를 받아야 됨)되어야 한다는 점이다.

전역변수 외에도 다른 방법이 있겠지만, 받아와서 간단히 처리하기 위해 전역변수로 처리하였다.

 

만약 새로 초기화되면 marker는 이동이 아니라, 기존의 marker와 별개의 marker가 새로 생성될 것이다.

물론, 기존 marker를 삭제하고 새로 생성해서 출력하는 방법도 이동한 것처럼 보이므로 취향에 따라 선택하면 된다.

 

<!-- javascript -->
let marker;

const chgLoc = () => {
	const lat = $('#lat').val();
	const lon = $('#lon').val();
		
	const regExp = /^[\-0-9\.]+$/;
		
	if( !(lat == '' || lon == '' || !regExp.test(lat) || !regExp.test(lon) || lat.split('.').length > 2 || lon.split('.').length > 2 || +lat > 90 || +lat < -90 || +lon > 180 || +lon < -180) ){
		if(marker == null) marker = new kakao.maps.Marker();
		
		if(map != null) {
			marker.setPosition(new kakao.maps.LatLng(lat, lon));
			marker.setMap(map);
		}else return;
	}else {
		if(marker != null) marker.setMap(null);
		return;
	};
}

 

반응형

 

▲ 코드를 간단히 설명하면,

 

(1) 전역변수 marker가 nullable이면 초기화시켜주고, 아닐 경우에는 할당된 값을 그대로 setPosition과 setMap으로 위치를 셋팅하고 맵에 그려준다.

 

(2) 입력한 위도,경도 값이 좌표값 형태가 아니면, 그려준 마커를 삭제하여 표시하지 않는다.

 

※ if에 적힌 조건문은 좌표값 형태가 아닐 경우를 나열한 것이다.

▷ 위도나 경도 중 빈 값이 있는 경우
▷ 숫자 . -  이 아닌 값이 있는 경우 (정규식 사용)
▷ .이 여러 개 있는 경우
▷ 위도나 경도의 각 최대/최소 값을 넘어서는 경우

 

이렇게 코드를 작성하면, 위도와 경도를 모두 알맞게 입력한 경우 마커가 제대로 이동하는 것을 확인할 수 있다!

 

 

🤞 도움이 되셨기를 바랍니다. 한 번의 클릭과 댓글은 어딘가의 누군가에게 진실로 큰 힘이 됩니다. 🐱‍🏍