如何使用 google_maps_flutter 在标记内创建文本? [英] How to create text inside marker with google_maps_flutter?

问题描述

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

I need to create a map marker like this in this example:

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

有人知道怎么做吗?

推荐答案

我用这个方法解决了

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

这篇关于如何使用 google_maps_flutter 在标记内创建文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！