음식점 검색 기능 추가하기

드디어 가장 기본적인 기능 또한 추가했다. 

원리는 나름 간단하다. 

 

function submitSearch(){
    let searchString=$("#searchString");
    let storeList=callApi("/search/foodData/"+searchString.val(),"post","");
    var markers = [];
    update(storeList);

     var location = new naver.maps.LatLng(storeList[0].latitude,
                                     storeList[0].longitude);

    map.setCenter(location); // 얻은 좌표를 지도의 중심으로 설정합니다.
    map.setZoom(19); // 지도의 줌 레벨을 변경합니다.
}

 

일단 프론트에서 검색어를 받아서  서버로 보내준다. 

 

그리고 그 검색어를 활용해서 

public List<FoodDatas> getDataBySearch(String searchString) {
    return foodRepository.findByNameContaining(searchString);
}

 

음식점 데이터 리스트를 찾고 

 

그리스트를 이제 다시 프론트에서 쓸수있는 DTO 형태로 바꿔서 전송한다. 

@PostMapping("/search/foodData/{searchString}")
    @ResponseBody
    public  List<FoodDatasDTO> searchString(@PathVariable("searchString") final String searchString){
        List<FoodDatas> foodDatas=foodService.getDataBySearch(searchString);
        List<FoodDatasDTO> datasDTOS= new ArrayList<>();

        //빈 DTO 에  음식점 데이터 넣는 작업
        for (int i = 0; i < foodDatas.size(); i++) {
            FoodDatasDTO dto= new FoodDatasDTO( foodDatas.get(i));
//            datasDTOS.add(dto);
            datasDTOS.add(dto);
        }

        return datasDTOS;

    }

 

 

그럼이제 update 함수를 통해서 다시 마커 정보를 표시하면된다. 

update 부분은 전에 만들어준 부분을 아예 똑같이써서 다행히 수정할부분은 없었다.  대신

 

update 함수가 끝난후 가장 검색어 결과가 나온 음식점으로 지도를 이동시켜야 아주 사용자에게 편리하니 

그 코드만 그 이후에 써줬다. 

 

 

 

그럼 이제 사진처럼 바로 도우모를 검색하면 도우모에 위치에 핑이 찍히고  거기로 지도 중심이 이동된다.!!!