Flutter 내 동네 설정하기 -1

1. 위치 업데이트하기

1) 내 위치를 geolocator를 이용해 가져온다. 

LocationPermission permission = await Geolocator.requestPermission(); 

를 Geolocator.getCurrentPosition()사용하기 전에 반드시 넣어야 한다. (안 그러면 오류 생김... 이걸로 삽질 좀 함 ㅜㅜ)

위도, 경도를 lat, lon에 넣는다.

 

2) 가져온 내 위치의 위도, 경도를 이용해 주소를 가져온다. 

이건 네이버 naver cloud platform > Reverse Geocoding에서 지원해준다.

gc - Reverse Geocoding

요청 헤더에는 애플리케이션 등록 시 발급받은 client id 값과 애플리케이션 등록 시 발급받은 client secret 값을 넣는다. 

Future<String> getLocation() async {
  LocationPermission permission = await Geolocator.requestPermission();
  Position position = await Geolocator.getCurrentPosition(
      desiredAccuracy: LocationAccuracy.high);

  String lat = position.latitude.toString();
  String lon = position.longitude.toString();
  Response response = await get(
      Uri.parse(
          "https://naveropenapi.apigw.ntruss.com/map-reversegeocode/v2/gc?request=coordsToaddr&coords=${lon},${lat}&sourcecrs=epsg:4326&output=json"),
      headers: headerss);
  
  String jsonData = response.body;
  
  var myJson_dong =
  jsonDecode(jsonData)["results"][1]['region']['area3']['name'];
  
  var myJson_gu =
  jsonDecode(jsonData)["results"][1]['region']['area2']['name'];
  
  var myJson_si =
  jsonDecode(jsonData)["results"][1]['region']['area1']['name'];

  String donggusi = myJson_si+" "+myJson_gu+" "+myJson_dong;

  print("update getLocation");
  return donggusi;
}

 

헤더는 이렇게 따로 뺏다.

Map<String,String> headerss = {
  "X-NCP-APIGW-API-KEY-ID": "개인 클라이언트 아이디", 
  "X-NCP-APIGW-API-KEY": "개인 시크릿 키"
};

---

2. 내 위치를 사진으로 보여주기

내 위치를 이용해 naver map api와 Image.network를 가져와서 보여준다.

1). Geolcator를 이용해 위도 -> 경도를 가져온다. 

이때, 위에서는 LocationPermission permission = await Geolocator.requestPermission(); 코드를 넣었는데 왜 여기서는 안 넣었는지 의문일 것이다. 나 같은 경우는 위에 함수랑 이 함수를 같은 파일안에 넣었다. 그런데 같은 파일에 넣으면 

"the grantresults array is empty. this can happen when the user cancels the permission request" 의 오류가 발생한다.

따라서, 위에서 permission을 했으니 밑에서는 안 해도 된다고 이해했다.

 

2) 가져온 위도, 경도를 이용해 apiURL을 가져온다.

이것은  naver cloud platform > Static Map에서 지원해준다.

raster - Static Map

왜 이미지를 가져오지 않고 URL을 가져올까?

원래는 이 함수에서 image를 return해서 body에 image를 출력하려고 했다. 하지만 ... 방법을 못찾은건지 Image.network()이외의 방법으로는 image가 출력이 안된다. 따라서, url를 받아오는 방법으로 했다. (여기서 삽질을 엄청 많이 했다 ㅠ_ㅠ)

Future <String> getLocationUrl() async{
  Position position = await Geolocator.getCurrentPosition(
      desiredAccuracy: LocationAccuracy.high);
  //현재위치를 position이라는 변수로 저장
  String lat = position.latitude.toString();
  String lon = position.longitude.toString();
  String apiURL='https://naveropenapi.apigw.ntruss.com/map-static/v2/raster?w=500&h=280&center='+lon+','+lat+'&level=13';
  print("update getLocationURL");
  return apiURL;
}

이런 식으로 받아와서 보여준다.

Image.network( snapshot.data.toString(), headers: headerss,)

Image.network()에서 headers를 추가하지 않으면 authentication오류로 출력이 되지 않으므로 꼭꼭 여기에도 추가해주어야 한다!!

---

최종적으로 구현한 화면이다.

- 참고

Flutter - 위치 정보를 받아서 시, 구 를 화면에 띄우기