在 Flutter Google 地图插件中的 Marker _icon 下放置自定义文本

2024-01-03

我正在尝试向自定义标记添加一些文本(我正在使用谷歌地图颤动 https://github.com/flutter/plugins/tree/master/packages/google_maps_flutter)

var cluster =  Marker(
                markerId: MarkerId( uuid.v1() ),
                position: new LatLng(clusterMap[box].latitude,clusterMap[box].longitude ),
                icon: _clusterImage,
                alpha: 0.5);

我能做的就是改变图标,现在图标是一个灰色背景的圆圈。我想在这个圆圈中添加一些文字。有办法做到这一点吗?


您需要使用画布在记号笔上书写。此功能在标记上书写。将这些行添加到您的类后,请转到下面。

import 'package:flutter/material.dart'; 
import 'package:flutter/painting.dart'; 
import 'package:google_maps_flutter/google_maps_flutter.dart'; 
import 'dart:async'; 
import 'dart:typed_data'; 
import 'dart:ui' as ui; 

....... .......
Future<Uint8List> getBytesFromCanvas(String text) async {

    final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
    final Canvas canvas = Canvas(pictureRecorder);
    final Paint paint1 = Paint()..color = Colors.grey;
    final int size = 100; //change this according to your app
    canvas.drawCircle(Offset(size / 2, size / 2), size / 2.0, paint1);
    TextPainter painter = TextPainter(textDirection: TextDirection.ltr);
    painter.text = TextSpan(
      text: text,//you can write your own text here or take from parameter
      style: TextStyle(
          fontSize: size / 4, color: Colors.black, fontWeight: FontWeight.bold),
    );
    painter.layout();
    painter.paint(
      canvas,
      Offset(size / 2 - painter.width / 2, size / 2 - painter.height / 2),
    );

    final img = await pictureRecorder.endRecording().toImage(size, size);
    final data = await img.toByteData(format: ui.ImageByteFormat.png);
    return data.buffer.asUint8List();
  }

现在,您可以通过以下方式轻松调用您想要的标记。

final Uint8List desiredMarker =
      await getBytesFromCanvas('Write What You want!!');

      var cluster =  Marker(
                markerId: MarkerId( uuid.v1() ),
                position: new LatLng(clusterMap[box].latitude,clusterMap[box].longitude ),
                icon: BitmapDescriptor.fromBytes(desiredMarker),
                alpha: 0.5);

我希望这是有帮助的。小心。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Flutter Google 地图插件中的 Marker _icon 下放置自定义文本 的相关文章

随机推荐