Flutter 高德地图应用之一：将widget 转换成高德地图的maker 图标

最新推荐文章于 2025-04-02 09:34:24 发布

原创

最新推荐文章于 2025-04-02 09:34:24 发布 · 703 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android #生成高德marker图标 #高德地图API

本文介绍了作者如何通过Flutter与Canvas技术，结合GoogleMarkIcon思路，创建自定义图标并转换为高德地图可用的BitmapDescriptor，以实现在跨平台地图应用中使用自定义标记。

按：笔者刚刚开始学习flutter，起因是想做一个跨平台的地图应用，因此就开始学习flutter 和高德地图的结合应用。
本方法受到Google MarkIcon 代码的启发而成，大致思路是将widget 画在canvas上面，然后截屏，获得img，将img转换成dataByte，再利用高德有关函数将其转换成高德地图可用的icon。

生成dataByte的代码如下

import 'dart:math';
import 'dart:ui' as ui;
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class Tool {
   
   
 // The fowllong is from the source of mark_icon
  static Future<Uint8List> circleCanvasWithText({
   
   
    required Size size,
    required String text,
    double fontSize = 15.0,
    Color circleColor = Colors.red,
    Color fontColor = Colors.black,
    FontWeight fontWeight = FontWeight.w500,
  }) async {
   
   
    final ui.PictureRecorder pictureRecorder = ui.