2023.02.10 - TIL

카카오 지도 검색 API

html 방식이 예제로 잘 나와있어 시도해보았다.

하지만 나의 현재 위치를 기반으로 한 검색이 html에서는 구현이 어려웠다.

radius 사용이 따로 없어 범위 지정이 안 되고 동기화에도 실패하였다.. 이건 네이버에서는 됐던건데..ㅠㅠ
(동기화는 더 알아봐야 할 것 같다. new Promise())
https://aridom.tistory.com/36

Rest API로 진행해보자
카카오에는 예제가 따로 나와있지 않은 것 같아 여러 블로그를 살펴보자

Radius! 있었구나!
useMapBounds은 지도 범위 내이기 때문에
중심 좌표 기준으로 특정 반경을 검색하려면
location 또는 x, y 파라미터와 radius를 함께 사용해주세요.

ps.keywordSearch('이태원 맛집', placesSearchCB, {
    radius : 2000, // 범위는 2000m (0m ~ 50000m 가능)
    location: new kakao.maps.LatLng(37.566826, 126.9786567)
}); 

근데 비동기로 계속 시작되어 navigator.geolocation.getCurrenPosition 값이 들어가지 않은 채로 지도가 출력된다. 네이버는 Promise로 감싸면 해결되었는데 이번에는 잘 안 된다.

그래서 아예 하나의 메서드 안에 넣어보기로 한다.

const cp = navigator.geolocation.getCurrentPosition(success, error, options);

function getCurrentPosition() {
  return new Promise(function (resolve, reject) {
    navigator.geolocation.getCurrentPosition(resolve, reject)
  })
}

getCurrentPosition()
.then(cp => createMap(cp))

function createMap(cp) {
    var lat = cp.coords.latitude,
        lon = cp.coords.longitude;
    var locPosition = new kakao.maps.LatLng(lat, lon);
  
	...
    
}

됐다!!

현재 위치를 받는 부분을 먼저 실행하고 지도와 관련된 부분을 동기 방식으로 나눠서 진했더니 잘 들어온다ㅠㅠ

검색어로 "헬스장"을 고정해두고 검색하는 사람의 위치에 따라 지도에 표시된다.

비동기 방식이 효율적일 수 있으나 위와 같은 경우에 목적에 따라 Promise를 사용해 동기 방식으로 사용할 수도 있다.

데이터 계속 찍어주도록 하기 (properties에 저장)

spring.jpa.properties.hibernate.format_sql=true spring.jpa.properties.hibernate.highlight_sql=true spring.jpa.properties.hibernate.use_sql_comments=true logging.level.org.hibernate.SQL=debug
logging.level.org.hibernate.type.descriptor.sql=trace