(9) 카카오 지도 API - 검색 인터페이스 구현

이전 포스팅에서는 특정장소의 정보를 DB에 저장하는 것을 알아보았습니다. 본 포스팅에서는 특정장소의 DB를 불러오는 방법에 대하여 알아봅시다.

여기에서부터는 웹개발자의 개발방향이나 서비스의 목적이 큰 영향을 미치게 됩니다. DB에 저장된 데이터를 어떠한 식으로 가공하여 (또는 접근하여) 사용자에게 전달하느냐의 영역입니다. 그러나 비록 웹개발자의 취향이 반영된다고 하여도 위치기반 서비스에서 첫번째로 필요한 것은 사용자의 위치와 특정장소의 위치의 상관관계의 정의가 최우선이라고 생각합니다.

예를 들어 길찾기 어플을 이용할 때도 출발지와 목적지가 반드시 필요하듯이 위치기반 서비스도 관심있는 최초의 장소와 주변의 정보가 먼저 제공되어야 합니다. 키워드나 해시태그 검색 최적화는 그 이후의 문제라고 생각합니다. 그렇다면 플랫폼을 중심으로 한 사용자 관점에서의 위치기반 서비스의 접근로직은 다음과 같이 작성할 수 있겠습니다.

위치정보제공 서비스와 플랫폼 DB 서버 간의 상호작용

먼저 사용자는 관심있어 하는 특정장소를 검색합니다. 예를 들어 어떤 사용자는 서울역 주변의 세미나에 관심이 많습니다. 이 때 다양한 검색옵션을 고려할 수 있겠습니다만, 먼저 필요한 것은 물리적인 거리입니다.

즉, 검색지점으로부터의 거리가 바로 그것입니다.

예를 들어 검색지점으로부터 1km, 5km, 10km 거리에 존재하는 세미나 정보를 제공할 수 있습니다.

DB에는 세미나 장소의 위도와 경도 좌표가 등록되어 있으므로 검색한 지점의 위도 경도 좌표가 있으면 피타고라스 정리 개념을 통해 쉽게 거리를 구할 수 있습니다....만!

지구는 둥글고 지표상의 두 지점의 궤적은 곡선을 그리기 때문에 이를 위한 특별한 수학공식이 필요합니다.

바로 하버사인 공식(Harversine Fomula) 입니다.

이 공식을 스크립트로 작성하여 활용하면 두 지점간의 정확한 직선거리에 따른 세미나 정보를 사용자에게 제공할 수 있습니다. 하버사인 공식에 대한 내용은 따로 포스팅에서 다루도록 하겠습니다.

2022.12.14 - [정보기술] - (10) 번외 - 검색지점 기준 반경거리 계산 (하버사인 공식)

어쨋든 어떠한 조건에 맞는 세미나 정보가 DB에서 지정되면 이를 가져오기 위한 배열(Array) 저장 장소가 필요하며 배열은 구현하는 방법은 다양하지만 본 포스팅에서는 xml 파일을 생성하는 방법을 이용하도록 하겠습니다.

이를 정리하면 위의 그림과 같습니다.

이를 구현하기 위해 먼저 사용자의 요청을 처리하기 위한 main.jsp가 필요하며 검색조건에 따른 세미나 정보를 보여주기 위한 result.jsp의 두 가지 jsp가 필요합니다.

본 포스팅에서는 먼저 main.jsp에 대한 내용을 작성하도록 하겠습니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
 
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<title> Test </title>
	
	<style>
	
	#main_destination {
	border-style: solid;
	border-color: gray;
	border-radius: 5px / 5px;
	width: 40%;
	height: 50px;
	float: left;	
	}	

      #keyword {
		outline: none;
		border: none; 
		background-color: #fff;
        font-family: Roboto;
        font-size: 15px;
        font-weight: 300;
        text-overflow: ellipsis;
        width: 500px;
      }

 </style>
 

</head>
  
<body>
<div id="map"></div>
				  
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=YOUR_API_KEY&libraries=services"></script>

<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = {
        center: new kakao.maps.LatLng(37.566826, 126.9786567), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };  
    
    
//지도를 생성합니다    
var map = new kakao.maps.Map(mapContainer, mapOption); 

//장소 검색 객체를 생성합니다.
var ps = new kakao.maps.services.Places();

//검색 결과 목록이나 마커를 클릭했을 때 장소명을 표출할 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({zIndex:1});


//입력된 키워드에 의한 장소 검색을 요청하는 함수입니다

function searchPlaces() {
    
	var kw = document.getElementById('keyword').value;

    if (!kw.replace(/^\s+|\s+$/g, '')) {
    alert('장소를 입력해주세요');
   
    return false;
    
    }
    
 // 장소검색 객체를 통해 키워드로 장소검색을 요청합니다
    ps.keywordSearch(kw, placesSearchCB); 
    
}


//장소검색이 완료됐을 때 호출되는 콜백함수 입니다
function placesSearchCB(data, status) {
    if (status === kakao.maps.services.Status.OK) {
           
        // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해
        // LatLngBounds 객체에 좌표를 추가합니다
        var bounds = new kakao.maps.LatLngBounds();   
        

        for (var i=0; i<5; i++) {
            displayMarker(data[i]);    
            bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
        } 	
        // 검색된 장소 위치를 기준으로 지도 범위를 재설정합니다. 
        // 정확한 위치라면 해당지점을, 다수의 장소라면 바운드의 중앙값을 기준으로 합니다.
        
        map.setBounds(bounds);        

        document.getElementById("center_lat").value = map.getCenter().getLat();
        document.getElementById("center_lng").value = map.getCenter().getLng();
        
        setTimeout(function(){ 
         	document.frm.submit();
     	}, 500); // 0.5초 뒤에 실행하기
        
        return;
        
    	} else if (status === kakao.maps.services.Status.ZERO_RESULT) {

        alert('검색 장소가 존재하지 않습니다. 다시 검색해주세요');
        
        document.getElementById("center_lat").value = 37.566826;
        document.getElementById("center_lng").value = 126.9786567;
        
        return;

    	} else if (status === kakao.maps.services.Status.ERROR) {

        alert('검색 결과 중 오류가 발생했습니다.');
        return;

    	}
}

// 지도에 마커를 표시하는 함수입니다
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);	  
    });

}

</script>

<script>
function enterkey() {
        if (window.event.keyCode == 13) {
 
             // 엔터키가 눌렸을 때 실행할 내용
             searchPlaces();        

        } 
}

</script>

<form id = "frm" name = "frm" action="ClassSearch.jsp" method="post">
					<div> 원하는 장소를 입력해주세요 </div>
			<div id = "main_destination">		
				<div id="pac-container"> 위치 <br>
				<input hidden="hidden" />
      				<input type="text" id="keyword" name="destination_search" onkeyup="enterkey();" value ="" placeholder="어디에 계신가요? 관심있는 지역을 입력해주세요" >
      				<input type="hidden" id="center_lat" name="center_lat" value = ""> 
				<input type="hidden" id="center_lng" name="center_lng" value = "">
    				</div>       	    					
			</div>
        	        <div id = "main_search">
				<input type="button" id ="main_search_button" name="main_search_button" onclick="searchPlaces()" value="검색하기">
			</div>
</form>
</body>
</html>

위는 main.jsp의 스크립트 입니다.

주소 자동완성 스크립트가 포함되어 있으며 지도 div의 style을 제거하고 주소 검색창은 #pac-input의 div만 구현되어 있습니다.

이후 사용자가 검색한 특정 장소의 위도와 경도를 form 양식을 통해 search.jsp로 전달하도록 된 스크립트 구문입니다. 이 때 YOUR_API_KEY에는 본인이 발급받은 키를 입력하도록 합시다.

이후 검색결과를 보여주는 search.jsp 에 대한 내용은 다음 포스팅에 작성하도록 하겠습니다.

2022.12.17 - [정보기술] - (10) 카카오 지도 API - 좌표 DB 불러오기 (xml 이용)

(10) 카카오 지도 API - 좌표 DB 불러오기 (xml 이용)

본 포스팅은 기존 포스팅에서부터 이어지는 내용입니다. 아래 그림에서 보면 사용자가 위치 정보 서비스를 제공받는 과정은 크게 두 가지로 나뉘는데 카카오 지도 API를 이용하면 먼저 주소 자

iftraveler.tistory.com

'정보기술' 카테고리의 다른 글

(11) 카카오 지도 API – 위치기반 서비스 제공 (끝) (0)	2022.12.17
(10) 카카오 지도 API - 좌표 DB 불러오기 (xml 이용) (0)	2022.12.17
(8) 카카오 지도 API - 좌표 DB 등록하기 (2)	2022.12.17
(7) 카카오 지도 API - 특정 주소의 좌표 확인하기 (0)	2022.12.17
(6) 카카오 지도 API - 주소 검색하고 목록으로 나타내기 (0)	2022.12.17

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

당신과 나의 어바웃 라이프

(9) 카카오 지도 API - 검색 인터페이스 구현

'정보기술' 카테고리의 다른 글

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

(9) 카카오 지도 API - 검색 인터페이스 구현

'정보기술' 카테고리의 다른 글

관련글

댓글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역