在flutter谷歌地圖中標(biāo)記點(diǎn)的自定義加載格式只允許assets本地資源圖片和byte數(shù)組的格式虏两，此byte在flutter中應(yīng)為Uint8List撤摸。
以下方法步驟只針對(duì)前端上傳自定義標(biāo)記點(diǎn)到后端再渲染到谷歌地圖的案例。
1、前端在相冊(cè)選擇要上傳的后端的圖片，和本地資源庫(kù)中的圖標(biāo)組合成自己想要的標(biāo)記點(diǎn)圖片樣式：
///組裝圖片組件
Widget startImageWidget() {
? return GetBuilder<CreateEventLogic>(
? ? ? id: 'img',
? ? ? builder: (logic) {
? ? ? ? return RepaintBoundary(
? ? ? ? ? key: state.startKey,
? ? ? ? ? child: Container(
? ? ? ? ? ? width: 124.w,
? ? ? ? ? ? height: 139.w,
? ? ? ? ? ? alignment: Alignment.topCenter,
? ? ? ? ? ? padding: EdgeInsets.only(top: 28.w),
? ? ? ? ? ? decoration: BoxDecoration(
? ? ? ? ? ? ? ? image: DecorationImage(
? ? ? ? ? ? ? ? ? ? image: ImageUtils.getAssetImage('common/icon30'))),
? ? ? ? ? ? child: LoadNetWorkImage(
? ? ? ? ? ? ? url: state.imgUrl11,
? ? ? ? ? ? ? width: 58.w,
? ? ? ? ? ? ? height: 58.w,
? ? ? ? ? ? ? isPeople: true,
? ? ? ? ? ? ),
? ? ? ? ? ),
? ? ? ? );
? ? ? });
}
RepaintBoundary 是關(guān)鍵點(diǎn)，RepaintBoundary組件可以將其包裹的其它組件截圖轉(zhuǎn)換成字節(jié)圖片格式Uint8List帅韧。其中 key: state.startKey，則是獲取組件信息的關(guān)鍵 該key的類(lèi)型是GlobalKey
///將組裝的圖片轉(zhuǎn)成base64
convertUint8ListImage() async {
? // 獲取當(dāng)前RenderObject
? RenderRepaintBoundary startBoundary = state.startKey.currentContext
? ? ? ?.findRenderObject() as RenderRepaintBoundary;
? // 創(chuàng)建圖像
? ui.Image? image1 = await startBoundary.toImage(pixelRatio: 1.0);
? // 將圖像編碼為PNG
? ByteData? byteData1 =
? ? ? await image1.toByteData(format: ui.ImageByteFormat.png);
? // 將ByteData轉(zhuǎn)為Uint8List
? Uint8List? pngBytes1 = byteData1?.buffer.asUint8List();
? state.startImg = base64.encode(pngBytes1!);
}
2啃勉、通過(guò)接口傳給后端忽舟，傳給后端時(shí)需要先將Uint8List格式的圖片轉(zhuǎn)成base64格式。
base64.encode()
3淮阐、通過(guò)接口數(shù)據(jù)渲染至地圖叮阅，渲染時(shí)需要將base64格式的圖片轉(zhuǎn)成Uint8List
base64Decode()
4、渲染標(biāo)記點(diǎn)
Set<Marker> markers = {};
markers.add(
? Marker(
? ? ? markerId: const MarkerId('myMarker'),
? ? ? position: position ?? baseState.myLocation,
? ? ? icon: BitmapDescriptor.bytes(result, width: 23.w, height: 27.w),
? ? ? onTap: () {
? ? ? ? Get.toNamed(RouterPath.userInfo,
? ? ? ? ? ? arguments: {'id': baseState.userDetails['id']});
? ? ? }),
);
