토이프로젝트(4)- 주변 맛집

오늘은 검색하면 그 주변에 마커가 생기는 것까지 구현을 했다.

 

태그부분은 늘 같으므로 오늘은 js 부분만 보겠다.

 

    keyWordSearch () {
      // 마커를 클릭하면 장소명을 표출할 인포윈도우 입니다
      var infowindow = new kakao.maps.InfoWindow({ zIndex: 1 })
      // 지도를 표시할 div
      const mapContainer = document.getElementById('map')
      const options = {
        center: new kakao.maps.LatLng(33.664, 6.890),
        level: 10
      }
      // 지도 생성 -> 나중에 전역변수로 맵을 생성해야함
      const map = new kakao.maps.Map(mapContainer, options)

      // 장소 검색
      const ps = new kakao.maps.services.Places()

      ps.keywordSearch(this.keyWord + '맛집', placesSearchCB)

      // 키워드 검색 완료시 호출되는 콜백함수
      function placesSearchCB (data, status, pagination) {
        if (status === kakao.maps.services.Status.OK) {
          // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기 위해 LatLngBounds 객체에 좌표 추가
          // LatBounds 객체에 좌표를 추가
          const 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)
          })
        }
      }
    }

추가 된것은 keyWordSearch라는 메서드이다. zIndex : 1로 인포윈도우는 화면 앞으로 나온다.

 

map 객체를 전역으로 만들어서 상황에 따라 안에 있는 맵만 바꿔주면 된다는데 그것은 다음에 하도록 하겠다.

 

일단 const ps =new kakao.maps.services.Places()로 장소 검색을 할 객체를 만들어준다.

 

ps.keyWordSearch로 v-text-field에서 입력한 값을 넣고 그 뒤에 추가로 '맛집' 이라는 것을 넣어 장소 + 맛집 으로 했다.

 

나머지는 마커를 위에다 띄워주는 코드로 주석을 단 것을 보면 이해할 수 있다.

 

오늘 끝!