如何使用google_maps_flutter在标记内创建文本？

Question

这是我需要的演示图像。

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

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

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