在颤动的谷歌地图的自定义标记中添加数字？ [关闭]答案

【问题标题】：add number within custom marker in google map at flutter? [closed]在颤动的谷歌地图的自定义标记中添加数字？ [关闭]
【发布时间】：2021-11-15 00:30:42
【问题描述】：

我想在颤振开发时在谷歌地图的自定义标记中添加数字。我在下面分享了我的完整来源。所以请帮助我，如何修改我的源代码来解决我的问题。谢谢我的依赖：

custom_marker_icon: ^0.2.0  


import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:custom_marker_icon/custom_marker_icon.dart';


class FlutterAnimarkerExample extends StatefulWidget {
  @override
  _FlutterAnimarkerExampleState createState() =>
      _FlutterAnimarkerExampleState();
}

class _FlutterAnimarkerExampleState extends State<FlutterAnimarkerExample> {
  final LatLng _latLng = LatLng(28.7041, 77.1025);
  final double _zoom = 15.0;

  Set<Marker> _markers = {};

  void _addMarkers() async {
    BitmapDescriptor markerIcon = await CustomMarkerIcon.fromIcon(
      Icons.circle,
      Colors.blue,
      100,
    );
    setState(() {
      _markers.add(
        Marker(
          markerId: MarkerId("marker_id"),
          position: _latLng,
          icon: markerIcon,
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Marker Icon Example'),
        backgroundColor: Colors.red,
      ),
      body: GoogleMap(
        onMapCreated: (GoogleMapController controller) {
          _addMarkers();
        },
        markers: _markers,
        initialCameraPosition: CameraPosition(
          target: _latLng,
          zoom: _zoom,
        ),
      ),
    );
  }
}

现在输出：
但我想输出如下图：

如何修改我的代码？

【问题讨论】：

标签： android flutter google-maps dart google-maps-markers

【解决方案1】：

试试这个而不是custom_marker_icon

 import 'dart:ui' as ui;

 Future<Uint8List> getBytesFromCanvas(int customNum, int width, int height) async  {
 final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
 final Canvas canvas = Canvas(pictureRecorder);
 final Paint paint = Paint()..color = Colors.blue;
 final Radius radius = Radius.circular(width/2);
 canvas.drawRRect(
     RRect.fromRectAndCorners(
       Rect.fromLTWH(0.0, 0.0, width.toDouble(),  height.toDouble()),
       topLeft: radius,
       topRight: radius,
       bottomLeft: radius,
       bottomRight: radius,
     ),
     paint);

 TextPainter painter = TextPainter(textDirection: TextDirection.ltr);
 painter.text = TextSpan(
   text: customNum.toString(), // your custom number here
   style: TextStyle(fontSize: 65.0, color: Colors.white),
 );

 painter.layout();
 painter.paint(
     canvas,
     Offset((width * 0.5) - painter.width * 0.5,
         (height * .5) - painter.height * 0.5));
 final img = await pictureRecorder.endRecording().toImage(width, height);
 final data = await img.toByteData(format: ui.ImageByteFormat.png);
 return data.buffer.asUint8List();
 }

创建您的Icon

Uint8List markerIcon = await getBytesFromCanvas(1, 150, 150);

然后设置你的图标

icon: BitmapDescriptor.fromBytes(markerIcon),

【讨论】：