RN - 클릭 위치 주소 얻기, reverse geocoding 적용

rn 에서 위도, 경도 값으로

googlemap api 통해 주소 얻어오는 코드 공유 합니다.

 

우선, react-native reverse geocoding 관련 library 를 활용해봤는데 제대로 동작이 되진 않았습니다.

github.com/devfd/react-native-geocoder

github.com/marlove/react-native-geocoding

 

더 찾아보니, library 는 불필요했고

바로 googlemap url 을 fetch() 해오면 정상적으로 주소를 얻어올 수 있습니다.

동작 화면

코드는 다음과 같이 적용합니다.

 fetch('https://maps.googleapis.com/maps/api/geocode/json?address=' + latitude + ',' + longitude
        + '&key=' + mApiKey + '&language=ko')
      .then((response) => response.json())
      .then((responseJson) => {
        console.log('udonPeople ' + responseJson.results[0].formatted_address);
      }).catch((err) => console.log("udonPeople error : " + err));

 

google api key 가 없다면, GCP 에서 geocoding api 키 발급 후 값을 복사해와서 위 apiKey 값에 넣으면 됩니다.

구글 지오코딩 API 키 발급 받는 방법 (...

1. 1. 구글 클라우드 콘솔 사이트에 방문 아래 링크를 클릭해 구글 지도 플랫폼 사이트로 접속해주세요. ...
2. 새 프로젝트를 만들기 프로젝트 선택 -> 새 프로젝트 버튼을 클릭해주세요.
3. API 사용 설정하기 ...
4. 사용자 인증 정보 만들기 ...
5. API 키 발급 완료

blog.cosmosfarm.com/archives/414/%EA%B5%AC%EA%B8%80-%EC%A7%80%EC%98%A4%EC%BD%94%EB%94%A9-api-%ED%82%A4-%EB%B0%9C%EA%B8%89-%EB%B0%9B%EB%8A%94-%EB%B0%A9%EB%B2%95-geocoding-api/

 

그럼, 정상적으로 response 까지 되지만 아직 permission 문제가 남아있습니다

위 같은 문구가 나오면, 결제 계좌를 추가로 활성화 시켜야 합니다.

아래 화면에서 우측 상단에 '활성화' 버튼이 생기는데,

누르면 이제 모두 완료 됩니다.

이제 정상적으로 값을 얻어올 수 있습니다.

responseJson 값을 출력하면 다음과 같이 나오고,

최종 적으로 responseJson.results[0].formatted_address 값을 얻어오면 됩니다. 

배열 [0] 과 [1] 을 찍어보면, 하나는 도로명, 하나는 지번 주소일 때도있고 반대일 경우도 있고

구글맵 한국어 주소가 중구난방 이네요