如何在google_maps_flutter中创建标记内的文本？

Question

如何在Google地图Flutter上实现一个带有标记文本的标记。参考图片如下所示：https://istack.dev59.com/W6oqG.webp。

- Guilherme A. V. Dos Santos

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

- Guilherme A. V. Dos Santos

---

谢谢你的解决方案！你知道如何为文本添加背景颜色吗？ - kashlo

你好，很高兴为您服务。要添加文本的背景颜色，您需要创建一个TextSpan。 <-- TextPainter painter = new TextPainter( textDirection: TextDirection.ltr, ); painter.text = TextSpan( text: title.toStringAsFixed(0), style: TextStyle( fontSize: 35.0, color: Theme.of(context).accentColor, letterSpacing: 1.0, fontFamily: 'Roboto Bold', ), );--> - Guilherme A. V. Dos Santos

这应该被标记为正确答案，谢谢！ - Vincent Gagnon

@GuilhermeAlvesVieira 请问我该如何在这里使用自定义图标？ - Prasath

@Prasath，我在这里发布的内容是要创建一个带有自定义文本的图标。现在，你想要的是获取图像（png）中的文本，这是我的理解对吗？你可以使用以下库来完成此操作：

• https://pub.dev/packages/firebase_ml_vision

- Guilherme A. V. Dos Santos

Answer 2

你可以使用Canvas和Painter手动完成。或者，你可以使用这个包来实现问题中所要求的完全相同的功能。

https://pub.dev/packages/label_marker

只需浏览一遍概述，就可以看出它是否适合您。我真心希望它能帮到您。是的，我做到了 :)

- Nirmal Scaria