파파비의 블로그

플러터, flutter) 위치 정보 이용하여 Google Map 사용하기 본문

개발/flutter

플러터, flutter) 위치 정보 이용하여 Google Map 사용하기

N. Dave 2020. 6. 21. 15:29
반응형

위치정보 이용하기

https://pub.dev/packages/location#-readme-tab-

 

location | Flutter Package

A Flutter plugin to easily handle realtime location in iOS and Android. Provides settings for optimizing performance or battery.

pub.dev

해당패키지를 import하고

 

Location() 객체를 만든 후에 .getLocation() 을 때려주면 되고,

future로 LocationData 객체를 return 한다.

 

import만 하면 알아서 허가 등 다 업데이트되지만,

ios는 dependency 관련해서 추가적인 작업을 해주어야해서, readme를 잘 읽어보아야 한다.

 

 

위치정보를 활용해서 구글맵에서 Static Map을 가져와보자,

참고로 Static Map은 아래와 같은 형태를 의미한다.

드래그해서 움직여지진 않는다.

형태는 간단하다.

Location 정보를 이용하여 Google API에 요청을 보내면 Google API에서 이미지를 돌려줄 것이다.

URL을 NetwortImage에 넣어서 요청하고 이미지를 받아오면 된다. 

 

1) 요청보낼 Google API 만들기  (아이디를 등록해두어야 한다)

새로 클래스를 만들었고,

이런식으로 일단 API에 개인의 API key와, 얻은 위치정보를 넣는다.

여기서 아이디를 만들고, API를 구성하고, KEY도 가져오고 하느라 생각보다 시간이 많이 걸렸다.

그러나 한번 할줄 알게 되면 금방이다.

 

<참고1>API를 어떻게 구성하느냐!? > https://developers.google.com/maps/documentation/maps-static/intro#authentication의 예시를 가져와서 수정하면 된다.

더 상세한 API구성 방법은 알아서 찾아봐야 한다.

 

<참고2> api를 두줄, 세줄로 하면 인식이 안된다. 길더라도 저렇게 위에 예시처럼 한줄로 만들어야만 한다.

 

2) 요청이 들어간 URL을 네트워크 이미지를 활용해서 가져오기

일단 URL을 가져오고, 그것을 _previewImageURL에 할당해주고 ,setstate을 갈겨버린다.

변화를 감지한 Flutter는, 

Container에 Text를 넣을지, Image를 넣을지 고민하게 되는데, _previewImageUrl 이 null이 아닌 것을 파악하고

Image.network에 할당된 _previewImageUrl 을 넣어 이미지를 google API에 요청하고, 이미지를 받아온다.

 

요러케 말이다.

반응형
Comments