在 Flutter Google Maps Plugin 的 Marker _icon 下放置自定义文本答案

【问题标题】：Place a custom text under Marker _icon in Flutter Google Maps Plugin在 Flutter Google Maps Plugin 的 Marker _icon 下放置自定义文本
【发布时间】：2019-05-16 16:07:46
【问题描述】：

我正在尝试向自定义标记添加一些文本（我正在使用google maps flutter）

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

我能做的只是改变图标，现在图标是一个灰色背景的圆圈。我想在这个圈子中添加一些文字。有办法吗？

【问题讨论】：

标签： google-maps flutter

【解决方案1】：

您需要使用画布在标记上书写。这个函数写在标记上。将这些行添加到您的课程后，请往下走。

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);

我希望这会有所帮助。保重。

【讨论】：

【解决方案2】：

（肮脏但正确的）方法是使用 Canvas 并手动进行绘画。但是，如果您只希望标记上的文本作为标签（或标签），这应该可以完成工作。

https://pub.dev/packages/label_marker

只需浏览一次概述，您就可以查看它是否适合您。我真的希望它有所帮助。是的。我做到了:)

【讨论】：