카카오지도 API를 활용한 길찾기

카카오지도 길찾기!
DB에 저장된 주소를 도착지로 설정하여 길찾기 기능을 구현했다.

1. 길찾기 버튼 부분

<button class="map-btn" id="map-btn">길찾기</button>

길찾기 버튼 클릭시, 이벤트를 주기 위해 id나 class를 설정한다.

2. js부분

// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();

// 주소로 좌표를 검색합니다
geocoder.addressSearch(sradr, function(result, status) {

    // 정상적으로 검색이 완료됐으면 
     if (status === kakao.maps.services.Status.OK) {

        var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
			var lat = result[0].y; // 위도
			var lng = result[0].x; // 경도
			console.log(lat);
			console.log(lng);
						
		var mapbtn = document.getElementById('map-btn');
		mapbtn.addEventListener("click", function() {
			window.location = "https://map.kakao.com/link/to/"+document.getElementById("sName").value+","+lat+","+lng;
		})

길찾기를 구현하려면 우선 해당 주소의 좌표, 즉 위도와 경도를 먼저 구해야 한다.
그 후 버튼 ID값으로 클릭 이벤트를 설정한 후에, window.location 으로 페이지가 해당 url로 이동하게끔 지정해주면 된다.

"https://map.kakao.com/link/to/" 뒤에 도착지로 설정할 장소 이름 + 위도 + 경도 순서로 작성해야 한다.