Flutter 高德地图之自定义Marks

image.png

高德地图插件大家想必已经不陌生了（不熟的去看上一篇），按产品需求开发时需要在地图上展示自定义的Mark，观察Mark方法:

(new) Marker Marker({
        required LatLng position,
        double alpha = 1.0,
        Offset anchor = const Offset(0.5, 1.0),
        bool clickable = true,
        bool draggable = false,
        BitmapDescriptor icon = BitmapDescriptor.defaultMarker,
        bool infoWindowEnable = true,
        InfoWindow infoWindow = InfoWindow.noText,
        double rotation = 0.0,
        bool visible = true,
        double zIndex = 0.0,
        void Function(String)? onTap,
        void Function(String, LatLng)? onDragEnd,
    })

发现并没有 Mark widget，没有widget就意味着无法自定义widget，这可如何是好，但聪明的我又怎会被这小小的难题困住，百度、谷歌疑难解答不懂就问这是个好习惯，找到了解决思路，以BitmapDescriptor icon为突破口。

通过观察BitmapDescriptor发现提供了展示png字节的方法：

static BitmapDescriptor fromBytes(Uint8List byteData) {
   return BitmapDescriptor._(['fromBytes', byteData]);
 }

至此是不是就明了了，只需将自定义的widget转为png在转为ByteData即可。

wiget->ByteData:

 Future widgetToByteData(Widget widget,
     {Alignment alignment = Alignment.center,
     Size size = const Size(double.maxFinite, double.maxFinite),
     double devicePixelRatio = 1.0,
     double pixelRatio = 1.0}) async {
     RenderRepaintBoundary repaintBoundary = RenderRepaintBoundary();
     RenderView renderView = RenderView(
     child: RenderPositionedBox(alignment: alignment, child: repaintBoundary),
     configuration: ViewConfiguration(
       size: size,
       devicePixelRatio: devicePixelRatio,
     ),
     window: ui.window,
   );

   PipelineOwner pipelineOwner = PipelineOwner();
   pipelineOwner.rootNode = renderView;
   renderView.prepareInitialFrame();

   BuildOwner buildOwner = BuildOwner(focusManager: FocusManager());
   RenderObjectToWidgetElement rootElement = RenderObjectToWidgetAdapter(
    container: repaintBoundary,
    child: widget,
   ).attachToRenderTree(buildOwner);
   buildOwner.buildScope(rootElement);
   buildOwner.finalizeTree();

   pipelineOwner.flushLayout();
   pipelineOwner.flushCompositingBits();
   pipelineOwner.flushPaint();

   ui.Image image = await repaintBoundary.toImage(pixelRatio: pixelRatio);
   ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png);

   return byteData;
 }

此方法直接copy拿走，多费一点脑子算我输，实现思路已OK

附上完整的代码：

import 'dart:ui' as ui;
.
.
 AMapWidget? map;
 Map initMarkerMap = {};
 AMapController? _mapController;

 late BitmapDescriptor icon;

 ///自定义地图mark的 widget转字节
 Future widgetToByteData(Widget widget,
     {Alignment alignment = Alignment.center,
     Size size = const Size(double.maxFinite, double.maxFinite),
     double devicePixelRatio = 1.0,
     double pixelRatio = 1.0}) async {
   RenderRepaintBoundary repaintBoundary = RenderRepaintBoundary();

   RenderView renderView = RenderView(
     child: RenderPositionedBox(alignment: alignment, child: repaintBoundary),
     configuration: ViewConfiguration(
       size: size,
       devicePixelRatio: devicePixelRatio,
     ),
     window: ui.window,
   );

   PipelineOwner pipelineOwner = PipelineOwner();
   pipelineOwner.rootNode = renderView;
   renderView.prepareInitialFrame();

   BuildOwner buildOwner = BuildOwner(focusManager: FocusManager());
   RenderObjectToWidgetElement rootElement = RenderObjectToWidgetAdapter(
     container: repaintBoundary,
     child: widget,
   ).attachToRenderTree(buildOwner);
   buildOwner.buildScope(rootElement);
   buildOwner.finalizeTree();

   pipelineOwner.flushLayout();
   pipelineOwner.flushCompositingBits();
   pipelineOwner.flushPaint();

   ui.Image image = await repaintBoundary.toImage(pixelRatio: pixelRatio);
   ByteData? byteData = await image.toByteData(format: ui.ImageByteFormat.png);

   return byteData;
 }

///自定义widget
 widgetContext( ) {
   return Container(
     width: 540.w,
     height: 180.h,
     decoration: BoxDecoration(
         border:
             Border.all(width: 5.w, color: Color.fromRGBO(236, 253, 255, 1)),
        color: Colors.white,
         borderRadius: BorderRadius.only(
             topLeft: Radius.circular(70.r),
             topRight: Radius.circular(70.r),
             bottomRight: Radius.circular(70.r),
             bottomLeft: Radius.circular(12.r))),
     child: Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
             ···       
       ],
     ),
   );
 }

 ///添加自定义mark
 addMark() async {
     ByteData? byteData =
         await widgetToByteData(widgetContext());
     icon = BitmapDescriptor.fromBytes(byteData!.buffer.asUint8List());
     Marker marker = Marker(
       infoWindowEnable: false,
       position: LatLng(double.parse(item['lat'].toString()),
           double.parse(item['lng'].toString())),
       icon: icon,
       anchor: const Offset(0, 1.0),
     );
     initMarkerMap[marker.id] = marker;
   }
   setState(() {
     map = AMapWidget(
       mapType: MapType.bus,
       labelsEnabled: false,
       onLocationChanged: (argument) {
         onLocationChangeds(argument);
       },
       myLocationStyleOptions: MyLocationStyleOptions(false),
       privacyStatement: AmapConfig.amapPrivacyStatement,
       apiKey: AmapConfig.amapApiKeys,
       onMapCreated: onMapCreated,
       markers: Set.of(initMarkerMap.values),
     );
   });
 }
@override
 void initState() {
   // TODO: implement initState
   super.initState();
   addMark();
 }

如果到此处本文完结那和别的文章也就没什么不同之处了，注意⚠️有两处坑

a.对于Text的定义要用

Directionality(
           textDirection: TextDirection.ltr,
           child:Text('')
        )

b.自定义的widget只能纵向布局因此可采用富文本来解决横向布局需求 RichText()

====== 嫖走吧，有良心的就点点赞加个关注$$ =======