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

最新推荐文章于 2024-03-24 21:59:55 发布

MaraSun

最新推荐文章于 2024-03-24 21:59:55 发布

阅读量538

点赞数

分类专栏：软件开发文章标签： flutter android 生成高德marker图标高德地图API

本文链接：https://blog.csdn.net/Uman/article/details/128500831

版权

软件开发专栏收录该内容

125 篇文章 2 订阅

订阅专栏

按：笔者刚刚开始学习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.PictureRecorder();
    final Canvas canvas = Canvas(pictureRecorder);
    final Paint paint = Paint()..color = circleColor;
    final Radius radius = Radius.circular(size.width / 2);

    canvas.drawRRect(
        RRect.fromRectAndCorners(
          Rect.fromLTWH(
              0.0, 0.0, size.width.toDouble(), size.height.toDouble()),
          topLeft: radius,
          topRight: radius,
          bottomLeft: radius,
          bottomRight: radius,
        ),
        paint);

    TextPainter painter = TextPainter(textDirection: TextDirection.ltr);
    painter.text = TextSpan(
      text: text,
      style: TextStyle(
          fontSize: fontSize, color: fontColor, fontWeight: fontWeight),
    );

    painter.layout();
    painter.paint(
        canvas,
        Offset((size.width * 0.5) - painter.width * 0.5,
            (size.height * .5) - painter.height * 0.5));

    final img = await pictureRecorder
        .endRecording()
        .toImage(size.width.toInt(), size.height.toInt());
    final data = await img.toByteData(format: ui.ImageByteFormat.png);

    return data!.buffer.asUint8List();
  }
}

使用方法：

// BitmapDescriptor 是高德地图中的定义，和Google的有区别，这也是诞生这个做法的原因。
late BitmapDescriptor? m_MeIcon = null;
......
//初始化检测
 if (m_MeIcon == null) m_MeIcon = await _GetMeIcon();
    final Marker marker = Marker(
      position: markerPosition,
      rotation: rotation,
      //使用默认hue的方式设置Marker的图标

      icon: m_MeIcon!,
    );

......
//异步函数，异步是因为里面的circleCanvasWithText 是异步的。
Future<BitmapDescriptor> _GetMeIcon() async {
    var imgData = await Tool.circleCanvasWithText(
        size: const ui.Size(40, 40),
        text: '↑',
        circleColor: const Color.fromARGB(128, 255, 0, 0),
        fontColor: Colors.white,
        fontSize: 22);
    var myIcon = BitmapDescriptor.fromBytes(imgData);
    // _markers['circleCanvasWithText'] = Marker(
    //   icon: myIcon,
    //   position: LatLng(_currentLatLng.latitude, _currentLatLng.longitude),
    // );
    return myIcon;
  }