如何使用 google_maps_flutter 在标记内创建文本？ [关闭]答案

【问题标题】：How to create text inside marker with google_maps_flutter?如何使用 google_maps_flutter 在标记内创建文本？ [关闭]
【发布时间】：2020-01-30 00:48:36
【问题描述】：

在这个例子中我需要像这样创建一个地图标记：

https://i.stack.imgur.com/W6oqG.jpg

有人知道怎么做吗？

【问题讨论】：

标签： flutter google-maps-api-3 google-maps-markers flutter-layout

【解决方案1】：

我用这个方法解决了

Future<BitmapDescriptor> createCustomMarkerBitmap(String title) async {
        TextSpan span = new TextSpan(
          style: new TextStyle(
            color: Prefs.singleton().getTheme() == 'Dark'
                ? Colors.white
                : Colors.black,
            fontSize: 35.0,
            fontWeight: FontWeight.bold,
          ),
          text: title,
        );
    
        TextPainter tp = new TextPainter(
          text: span,
          textAlign: TextAlign.center,
          textDirection: TextDirection.ltr,
        );
        tp.text = TextSpan(
        text: title.toStringAsFixed(0),
        style: TextStyle(
          fontSize: 35.0,
          color: Theme.of(context).accentColor,
          letterSpacing: 1.0,
          fontFamily: 'Roboto Bold',
         ),
        );
    
        PictureRecorder recorder = new PictureRecorder();
        Canvas c = new Canvas(recorder);
    
        tp.layout();
        tp.paint(c, new Offset(20.0, 10.0));
    
        /* Do your painting of the custom icon here, including drawing text, shapes, etc. */
    
        Picture p = recorder.endRecording();
        ByteData pngBytes =
            await (await p.toImage(tp.width.toInt() + 40, tp.height.toInt() + 20))
                .toByteData(format: ImageByteFormat.png);
    
        Uint8List data = Uint8List.view(pngBytes.buffer);
    
        return BitmapDescriptor.fromBytes(data);
      }

使用方法：

BitmapDescriptor bitmapDescriptor = await createCustomMarkerBitmap(...);

Marker marker = Marker(
  /*  in addition to your other properties: */
  icon: bitmapDescriptor
);

【讨论】：

感谢您的解决方案！你知道如何为文本添加背景颜色吗？
嗨，很高兴。要添加文本的背景颜色，您需要创建一个 TextSpan。
这应该标记为正确答案，谢谢！
@GuilhermeAlvesVieira 请告诉我，如何在此处使用自定义图标？
@Prasath 我的帖子是创建一个带有自定义文本的图标。现在你想要的是获取图像（png）中的文本我理解什么？你可以使用一个库来做到这一点： - pub.dev/packages/firebase_ml_vision