Flutter (플러터) - 구글지도 사용 - (2) 화면에 지도 표시

 

1편을 보고오지 않았다면

먼저 보고 오시기를 권장 드립니다.

 

 

https://want-all.tistory.com/3

Flutter (플러터) - 구글지도 사용 - (1) 환경세팅

 

 

 

이번 편에서는

화면에 지도를 구현 하는 방식에 대해서  포스팅 합니다.

 

---

 

 

1) 위젯 자체의 생성

 

 

GoogleMap(
        buildingsEnabled: false, // 건물 3D 높이 표현
        onMapCreated: (GoogleMapController controller) async {
          LocationMapController.to.mapController = controller.obs;
          controller.setMapStyle('''[
          {
                "featureType": "poi.business",
                "elementType": "all",
                "stylers": [
                  { "visibility": "off" }
                ]
          },
           {
                "featureType": "road",
                "elementType": "labels",
                "stylers": [
                  {"visibility": "off"}
                ]
          },
          {
          "featureType": "transit.station.bus",
          "elementType": "all",
          "stylers": [
                { "visibility": "off" }
          ]
                  },
                  {
          "featureType": "administrative",
          "elementType": "labels",
          "stylers": [
                { "visibility": "off" }
          ]
                  }
                ]''');
        },
         onTap: (LatLng) {
              controller.preview.value = false;
            },
        circles: Set.from(controller.regionsRadius.map((element) => element)),
        markers: Set.from(controller.regionsMarkers.map((element) => element)),

        initialCameraPosition: const CameraPosition(
          zoom: 12.5,
          //! 서울 광진구 자양동 624-26 센터 고정 좌표
          target: LatLng(37.53539088994158, 127.08281443453849),
          tilt: 0, // 기울기
        ),
        compassEnabled: false, // 나침반 유무
        myLocationEnabled: true, // 현재 위치 파란 점 활성화
        myLocationButtonEnabled: false, // 현재 위치로 이동하는 버튼 활성화
        minMaxZoomPreference:
            const MinMaxZoomPreference(10, 16), // 최소 및 최대 줌 레벨 설정
        mapToolbarEnabled: false,
        zoomControlsEnabled: false,
      )

 

 

 

각 필드 설명.

 

- buildingsEnabled : 건물 높이 3D 표현 ( 상세한 지도를 보려면 거의 반 필수적으로 켜줘야 함)

 

- onMapCreated : 지도 생길 때 작동 함수 

 

     - 현재는 setMapStyle 이란 옵션을 활용하여 지도에서 보이는 도로명 주소, 특정 마커들을 내가 원하는 것만 보이게 커스텀 함.

 

     - 참고 자료 : https://developers.google.com/maps/documentation/android-sdk/style-reference?hl=ko&_gl=1*1e45qga*_up*MQ..*_ga*NTM2OTQ1MzU3LjE3MjgyOTcyNzk.*_ga_NRWSTWS78N*MTcyODI5NzI3OC4xLjAuMTcyODI5NzI3OC4wLjAuMA..

 

Android용 Maps SDK 스타일 참조  |  Maps SDK for Android  |  Google for Developers

 

 

- onTap : 지도 클릭시 실행되는 콜백 함수

 

- markers : 지도에 그려질 마커

 

- initialCameraPosition : 초기 지도의 좌표와 줌 배율

 

 

 

 

이 정도가 중요한 설정 정도고,

 

나머지는 전부 주석을 추가 해놓았으니 확인해보면 좋을 것 같다.

 

 

 

2)  지도 위의 마커의 실시간 변화를 위한 소켓 적용 

 

본인의 프로덕트에서는 지도의 마커가 유동성있게 변경되어야 해서,

소켓 (실시간 통신) 을 적용 시켜놓아야 했는데,

 

그에 따른 코드까지 기술 합니다.

 

StreamBuilder(
      stream: Socket.getResponse,
      builder: (context, AsyncSnapshot snapshot) {
        if (snapshot.hasData) {
          var decodeData = Model.fromJson(snapshot.data);

          controller.removeMarker(decodeData.id);
          controller.makePin(decodeData);
        }
        return Obx(
          () => GoogleMap(

 

 

당연히 계속 움직이는 데이터라면 StreamBuilder로 감싸줘야 하고,

stream : 어떤 데이터가 계속 들어와 ? < 를 설정해주는 부분입니다.

 

builder : 그래서 뭘 그릴건데 ?

 

 

여기서

snapshot 데이터가  실시간 변경  데이터 입니다.

 

 

구글 지도에서는 마커를 그렸으면, 그 상태에서 수정하는 것이 아닌

 

 

"기존 마커의 삭제" 이후 "새 마커의 생성" 의 방식으로 이루어 집니다.

 

 

따라서

모델 형식에 따라 데이터를 받아오고,

기존 마커 삭제 -> 새 마커 생성 

 

 

의 코드를 순서대로 적용해주면 완료 입니다.

 

 

고생하셨습니다.