[React-native] react-native-maps로 android(안드로이드)용 구글 지도 띄우기

카카오지도 api를 사용할 수 있지 않을거란 기대감에

expo를 벗어나서 react-native만으로 다시 환경설정부터 이것저것 고생을(?) 했는데

결국 실패했다.......

카카오지도 api 문서를 아무리 봐도 

react-native에 적용이 어려워 보였고,

react-native내에서 카카오지도 api를 사용한 내용을 담은 포스트를 아무리 구글링해도 찾을 수 없었다

이제 네이버지도 api도 서비스를 안하니 

남은건 구글 지도! 

 

해외에 있을 때는 구글지도를 굉장히 잘 쓰지만,

국내에서는 사실 카카오나 네이버지도가 더 잘나오는거 같아서 안썼는데 어쩔 수 없지

찾다보니 우버에서 제공하는 지도도 있지만 다 영어인것 같아서 패스 !

 

react-native-maps로 만드는거라서 어렵지 않을거라고 생각했는데

초반엔 역시나 쉽지 않았다 ㅋㅋㅋㅋㅋ

 

가장 먼저 할 것은

>> npm install react-native-maps 

그리고 구글에서 지도 api를 위한 키 받기! 

나는 안드로이드 앱을 만들기 위해 받는거니까

Maps SDK for Android로 받았다.

 

그리고 나서 필요한 수많은 설정들...

---

위의 상태에서 일주일이 흘렀다,

그동안 했던 작업중 지도에 관한 부분들에 대해 기록을 남긴다.

 

현재 완성한 부분 중 지도만 잘라보면 아래와 같은 모양을 하고 있다.

현 위치를 받아와 표시하고, 주위에서 내가 필요한 장소들을 마커로 표시해 주고 있다.

그리고 지도를 이동해서 그 위치에서 검색을 할 수 있고, 현재 유저의 위치고 이동할 수 있다.

 

우선 현 위치를 받아와 표시해주는 부분부터 !

(expo 공식문서를 참고했다)

https://docs.expo.io/versions/latest/sdk/location/#locationgetpermissionsasync

Location - Expo Documentation

https://docs.expo.io/versions/latest/sdk/permissions/#permissionresponse

Permissions - Expo Documentation

react의 componentDidMoun() 안에서 아래의 비동기함수를 실행해준다.

사용자에게 위치가져오기를 허용할지 물어보고,

허용한다면 사용자의 현 위치를 가져올 수 있는 함수이다.

import * as Location from 'expo-location';

(async () => {
      let { status } = await Location.requestPermissionsAsync();
      if (status === 'granted') {
        let location = await Location.getCurrentPositionAsync({});
        // location.coords.latitude와 location.coords.longitude로 
        // 유저의 현 위치를 가져올 수 있다.    
      }
    })();

requestPermissionsAsync()는 테스트용 앱에서 딱 한번만 사용할 수 있어서,

만약 거절을 누르고 허용으로 바꾸고 싶다면 uninstall을 하고 다시 install을 해야한다는 설명이 있었다.

 

위의 함수를 통해 사용자의 현 위치를 가져오고, 

이를 state에 바로 저장해놓았다.

그래서 지도를 다른 곳으로 이동하고, 지도 우측 하단에 있는 현 위치로 이동하기 아이콘을 클릭하면

저장해놓은 현 위치를 이용하여 유저의 현 위치로 이동하게 했다.

이 때는 MapView의 region을 이용한다.

region은 지도에 보여줄 위도/경도/델타 값을 담을 수 있고, 이것 대로 지도에 보여진다.

<MapView
  region={{
    latitude: 유저의 현 위치 latitude ,
    longitude: 유저의 현 위치 longitude,
    latitudeDelta: 0.03,
    longitudeDelta: 0.02,
  }}
>

 

저 주황색 마커들은 Marker를 이용하였다.

https://github.com/react-native-community/react-native-maps/blob/master/docs/marker.md

마커는 아래처럼 쓸 수 있고, 

이 외에 나는 key, title, description 등을 추가로 사용하였다.

 <Marker
   coordinate={{
     latitude: lat,
     longitude: lon,
   }}
   pinColor={'orange'}
   onPress={onPressEvent}
 />

 

현 위치에서 검색하기 버튼을 누르면,

현 위치를 중심으로 주위에 내가 필요한 내용들을 서버에서 받았고,

그걸 마커의 coordinate에 넣어줘서 표시하였다.

 

현재 지도 외에는 검색 기능을 추가해 놓았는데,

이건 나중에 시간이 된다면 포스팅을 해봐야겠다.

 

1.5주간 react-native를 하면서 느낀 점은 

처음 사용해봐서 그런지 내가 한개의 태스크를 할 때 예상 시간보다 훨씬 긴 시간이 걸렸다.

내가 하고자 하는 기능에 대해서 구글에도 많은 정보가 없어서 더 힘들었고, 예상치 못한 오류들이 계속 발생해 그것도 힘들었다.

그렇지만 결국 공식 문서에서 답들을 대부분 찾을 수 있었고,

일주일도 안되어 금방 익숙해질 수 있었다.

또 앱이라서 그런지 더 재밌게 느껴지는 것 같다 ㅎ.ㅎ 

 

앞으로 남은 2주도 화이팅 !