선택 안됨 Flutter (플러터) - 구글지도 사용 - (4) 커스텀 마커

전편을 안보고 오셨다면,

 

먼저 보고 오시기를 추천 드립니다.

 

 

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

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

 

2편 : https://want-all.tistory.com/4?category=1160465

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

 

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

Flutter (플러터) - 구글지도 사용 - (3) 마커, 반경 생성

 

---

 

기본 마커 : 아래 이미지

 

아... 보자 마자 그냥 .. 너무 구리다.

 

라고 생각했다.

 

 

그래서 마커의 이미지를 내가 가지고 있는 이미지나

 

로컬 이미지로 바꿔주는 작업이 필요했다.

 

다행히도, 구글지도는 마커의 디자인 커스텀을 허용 했기에,

 

이제부터 그 구현 과정을 아래에 적으려 한다.

 

 

 

커스텀 마커 생성 ) 

 

마커의 icon은 BitmapDescriptor 타입으로 상당히 

생소한 데이터 타입이다.

 

하지만, 한 번 만들어보면, 크게 어렵지 않다.

 

 

 

 

간단한 로직을 먼저 설명하자면,

 

1) 이미지를 활용하여, BitmapDescriptor 타입의 위젯을 만든다.

2) 1번의 결과물을 marker 의 icon 인자에 할당한다.

 

 

1) BitmapDescriptor 타입의 위젯 생성

  ///* 채널 마커 모양
  Future<BitmapDescriptor> customMarkerWidget(Model data) async {
    Widget item = Container(
      width: 58.w,
      height: 92.w,
      child: Column(
        children: [
         
          CircleAvatar(
            backgroundColor: Colors.black, // 배경 색상
            radius: 26,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(100),
              child: Image(
                image: CachedNetworkImageProvider(
                  "$s3/${data.image}",
                ),
                width: 50,
                height: 50,
                fit: BoxFit.cover,
                filterQuality: FilterQuality.low,
              ),
            ),
          ),
        ],
      ),
    );

    return await item.toBitmapDescriptor(
        waitToRender: const Duration(milliseconds: 1000));
  }

 

 

위젯 부분은 따로 설명 할 부분이 없다,

 

사이즈나 이미지 정도를 정해 줄 뿐이다.

 

하지만 return 값을 보면, BitmapDescriptor 타입으로 만들어주기 위해,

item.toBitmapDescriptor 으로 변환 해주고,

 

 

   혹시나 있을 변환 시간으로 인하여, waitToRender로 1000miliseconds 정도의 딜레이를 주면 된다.

 

 

 

 

2) 1번의 결과물을 반영 마커에 반영

 

 Marker(
          markerId: MarkerId(data.cid),
          icon: customIcon,
          position: LatLng(
            data.location.lat.toDouble(),
            data.location.lon.toDouble(),
          ),
        ),

 

하면 종료다.

 

 

 

3) info Window, 마커 이름 까지 일괄 커스텀.

 

마커 이름과

인포윈도우를 실제로 사용해보면,

 

이것들도 디자인이 매우 구리다.

...

 

이것까지 커스텀을 해주자.

 

///* 커스텀 마커 + 챗
  Future<BitmapDescriptor> customMarkerWidget(Model data) async {
    Widget item = Column(
      mainAxisSize: MainAxisSize.min,
      children: [
// 인포 윈도우 방식
          IntrinsicWidth(
            child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.symmetric(horizontal: 5.w, vertical: 3.w),
              decoration: BoxDecoration(
                color: defaultWhite,
                borderRadius: BorderRadius.circular(5.r),
              ),
              child: Wrap(
                children: [
                  Text(
                       data.Message,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      fontSize: 11.sp,
                      fontWeight: FontWeight.w600,
                      color: defaultBlack,
                    ),
                  ),
                ],
              ),
            ),
          ),
          // 마커 디자인
 CircleAvatar(
                backgroundColor: defaultWhite, // 배경 색상
                radius: 18.r,
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(100),
                  child: Image(
                    image: CachedNetworkImageProvider(
                      "$s3/${data.thumbNail_image}",
                    ),
                    width: 30.w,
                    height: 30.w,
                    fit: BoxFit.cover,
                    filterQuality: FilterQuality.low,
                  ),
                ),
              ),
       // 마커 타이틀
          Transform.translate(
            offset: const Offset(0, -2), // special
            child: Container(
              child: Text(
                   data.name  
                style: TextStyle(
                  fontSize: 11.sp,
                  fontWeight: FontWeight.bold,
                  color: defaultBlack,
                ),
              ),
            ),
          )
      ],
    );

    return await item.toBitmapDescriptor(
        waitToRender: const Duration(milliseconds: 1000));
  }

 

이것까지 커스텀을 해주자.

 

 

이렇게 하면 끝이다.

 

 

도움이 되셨으면

좋아요와 댓글 부탁드립니다.