6월 27일 화요일 TIL 회고록

홈페이지 만들기

---

키워드로 장소 검색하기

카카오 Map API를 사용해서 키워드로 장소를 검색하면 검색결과를 마커로 표시하게 만들었다.

<div id="menu_wrap" class="bg_white">
                            <div class="option">
                                <div>
                                    <form onsubmit="searchPlaces(); return false;">
                                        키워드 : <input type="text" id="keyword" size="15"> 
                                        <button type="submit">검색하기</button> 
                                    </form>
                                </div>
                            </div>
                            <hr>
                            <ul id="placesList"></ul>
                            <div id="pagination"></div>
                        </div>
                    </div>

키워드를 검색할 수 있는 검색창을 만들었다. Maps API 샘플에는 키워드 부분에 value값을 넣지만 나는 넣지 않았다. (사이트를 들어가면 자동으로 검색되지 않게 하기위해)

 

마커를 담을 배열을 만들고 장소 검색 객체를 생성했다.

// 마커를 담을 배열입니다
var markers = [];

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

 

그 후 키워드 검색을 요청하는 함수인 searchPlaces()를 만들었다.

ps.keywordSearch에서 (keyword + '오락실')을 붙였는데, 오락실을 붙이지 않으면 경기도를 검색 시 오락실이 아닌 매장이 마커로 표시되어서 오락실을 붙였다.

// 키워드 검색을 요청하는 함수입니다.
 function searchPlaces() {
   var keyword = document.getElementById('keyword').value;
                            

    if(!keyword.replace(/^\s+|\s+$/g, '')) {
      alert('키워드를 입력해주세요!');
      return false;
    }

// 장소검색 객체를 통해 키워드로 장소검색을 요청합니다.                           
  ps.keywordSearch(keyword +' 오락실',placesSearchCB2);
 }

 

나머지는 카카오 맵 API에 있는 샘플 코드랑 같다. 너무 기므로 올리지는 않겠다..

 

문제점은 실행하면 검색창이 밑에 있어서 보이지가 않고 실행하면 내 위치와 주변 매장들이 같이 나왔으면 좋겠는데 

몇번 시도해봤는데 되지가 않는다. 검색해도 나오지가 않아서 정말 답답하다..  나중에 하고 일단 백엔드부터 다시 할지 아니면 계속 프론트를 건드려봐야할지 이것도 고민이다. 프론트 너무너무 어렵다 ㅠㅠ