4. Spring MVC - 주변 시설 찾기

 

구현하려는 기능 : 홈페이지 접속시 geolocation을 통해 사용자 위치에 대한 권한 요청후 확인 누를 경우, 위치 정보를 카카오 지도 API에 넘겨 주변에 있는 시설을 출력한다.

 

 

 

 

사용자 위치 정보 수집

 

- html5가 제공하는 geolocation을 통해 위치 권한 요청 후 사용자의 위도, 경도를 받아온다. 

- API를 통해 받아온 위,경도를 변수 lat, lng 에 저장

- latVal, lngVal 에 각각의 값을 저장 → hidden 값으로 페이지에 저장 

- lat, lng 값을 가지고 getAddr() 호출 → 도로명 주소로 변환 

function getCurrentPlace(){
window.navigator.geolocation.getCurrentPosition(function(position){
										
	var lat = position.coords.latitude;
	var lng = position.coords.longitude;

	$('#latVal').val(lat);
	$('#lngVal').val(lng);
	getAddr(lat, lng);
	},
	function(error){
		switch(error.code){
		case error.PERMISSION_DENIED:
			str="사용자 거부";
			break;
		case error.POSITION_UNAVAILABLE:
			str="지리정보 없음";
			break;
        case error.TIMEOUT:
            str="시간 초과";
			break;
			}
		});
	}
    getCurrentPlace();

 

 

 

 

 

위,경도 → 도로명 주소 변환

 

- 카카오 API 참고 : https://apis.map.kakao.com/web/sample/coord2addr/

- 카카오 지도 API script 선언 + 인증키 입력

- 위,경도 값을 넘겨 받아 주소 변환 객체를 통해서 좌표를 한글 주소로 변환한다. 

- result값을 확인 후 hidden에 아이디 설정하여  centerAddr로 저장

// 주소명 가져오기
function getAddr(lat, lng){
									
 	//주소-좌표 변환 객체 생성
	let geocoder = new kakao.maps.services.Geocoder();
									 
 	//지도의 중심 좌표	
	let coord = new kakao.maps.LatLng(lat, lng); 
 									
	let callback = function(result, status) {
		if (status === kakao.maps.services.Status.OK) {
								        	 
			$('#centerAddr').val(result[0].address.address_name);
			//console.log(result); 필요한 정보 확인 후 뽑아서 사용
			return result[0].address.address_name;
			}else {
				alert('위도 경도를 불러오는데 실패하였습니다.');
			 }
		   }
			//주소 요청 함수
			geocoder.coord2Address(coord.getLng(), coord.getLat(), callback);
		}

 

-console에 찍힌 주소 정보

 

 

 

 

 

 

 

카카오 지도 위에 원하는 시설 마크 찍기

 

- 카카오 API 참고 : https://apis.map.kakao.com/web/sample/keywordBasic/

- 위,경도 주소 받아오기&도로명 주소로의 변환 사이에 일정 시간이 소요 되어 interVal로 함수의 value가 1이 아닐때까지 함수 호출을 반복 

- hidden에 저장한 값을 불러와서 함수안에서 사용할 변수에 저장

function interval() {
									
	if($('#latVal').val() != 1 && $('#centerAddr').val() != 1) {
		stop();
		var lat = $('#latVal').val();
		var lng = $('#lngVal').val();
		var centerAddr = $('#centerAddr').val();
		// 마커를 클릭하면 장소명을 표출할 인포윈도우 입니다
		var infowindow = new kakao.maps.InfoWindow({zIndex:1});
										
		var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
			mapOption = {
					  center: new kakao.maps.LatLng(lat, lng), // 지도의 중심좌표
					  level: 3 // 지도의 확대 레벨
					    };  
													
		// 지도를 생성합니다    
		var map = new kakao.maps.Map(mapContainer, mapOption); 
										
		// 장소 검색 객체를 생성합니다
		var ps = new kakao.maps.services.Places(); 
										
		// 키워드로 장소를 검색합니다
		ps.keywordSearch(centerAddr + ' 근처 스크린골프', placesSearchCB); 
										
		// 키워드 검색 완료 시 호출되는 콜백함수 입니다
			function placesSearchCB (data, status, pagination) {
				if (status === kakao.maps.services.Status.OK) {
				// 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
				// LatLngBounds 객체에 좌표를 추가합니다
					var bounds = new kakao.maps.LatLngBounds();
										
					for (var i=0; i<data.length; i++) {
						displayMarker(data[i]);    
						bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
					     }       
										
					// 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다
					map.setBounds(bounds);
						} 
				}
										
				// 지도에 마커를 표시하는 함수입니다
				function displayMarker(place) {
										    
				// 마커를 생성하고 지도에 표시합니다
				var marker = new kakao.maps.Marker({
					map: map,
					position: new kakao.maps.LatLng(place.y, place.x) 
				});
										
				// 마커에 클릭이벤트를 등록합니다
				kakao.maps.event.addListener(marker, 'click', function() {
				// 마커를 클릭하면 장소명이 인포윈도우에 표출됩니다
				infowindow.setContent('<div style="padding:5px;font-size:12px;">' + place.place_name + '</div>');
				infowindow.open(map, marker);
										    });
										}	
									}
								}
								
				function stop(){
					clearInterval(interval);
								}
								
				var interval = setInterval(interval, 300);
								
							});

 

 

 

 

 

 

 

 

 

 

참고 

geolocation https://hooongs.tistory.com/6

카카오 지도 API https://apis.map.kakao.com/web/sample/coord2addr/