flutter Google Map Marker에 이미지 파일 추가하기

출시하려는 앱 UT를 마치고, 시간이 남아서 오랜만에 글을 쓴다.

블로그에 어려운내용을 안올리게 되는게 너무너무 글쓰기가 귀찮다..

 

구글맵을 띄우고, 마커 Stream 까지 다등록햇다는 가정하에 글을 씁니다.

(인터넷에 플러터 구글맵 마커 이런식으로 쳐도 이 과정까진 다 나올겁니다.)

final Uint8List markerIcon = await _getBytesFromCanvas(feature);
BitmapDescriptor bitmapDescriptor =
BitmapDescriptor.fromBytes(markerIcon);

Marker marker = Marker(

    markerId: MarkerId(feature.markerId!),
    position: LatLng(feature.latitude!, feature.longitude!),
    icon: bitmapDescriptor,
    onTap: () {

    });

 우린 이런식으로 마커를 생성할 것이다.

 

설명을 하자면, markerIcon이라는 Uint8List 변수를 만들것이고,

그걸 BitmapDescriptor 의 fromBytes를 이용해 저장한다.

그리고 마커에 icon으로 집어넣을 것이다

 

그렇다면 맨처음의 _getBytesFromCanvas로 가보자.

 

final icon = await getBitmapDescriptorFromAssetBytes(
    "assets/icons/cafe-mapicon.png");

이건 사람마다 asset파일을 몇개쓸지, 몇종류를 쓸지 등 케바케이므로, 전체 구문을 적지않는다.

나같은 경우는 switch /case로 필요한 이미지를 분류했다.

위와같이 getBitmap..함수로 받아주는 변수를 만들고 getBitmap..함수를 만들어보자

 

Future<Uint8List> getBitmapDescriptorFromAssetBytes(
    String path) async {
  final Uint8List imageData = await getBytesFromAsset(path, 130);

  return imageData;
}

Future<Uint8List> getBytesFromAsset(String path, int width) async {
  ByteData data = await rootBundle.load(path);
  ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(),
      targetWidth: width);
  ui.FrameInfo fi = await codec.getNextFrame();
  return (await fi.image.toByteData(format: ui.ImageByteFormat.png))!
      .buffer
      .asUint8List();
}

이런식으로 이미지데이터를 Uint8List화 시키는 과정을 거치면된다.

어쩌다보니 탑다운으로 설명을 한 것 같은데, 결국 이미지파일을 Uint8List화 시켜서 아이콘에 입히는 과정이라고 생각하면 된다. 이방법을 굳이 똑같이 따라할 필요도 없고, 이런 방법도 있다.

 

 

끗

 

더이상의 자세한 설명은 생략한다..