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

Posted 2023-02-23

【中文标题】在颤动的谷歌地图的自定义标记中添加数字？ [关闭]

【英文标题】：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,
        ),
      ),
    );
  

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

如何修改我的代码？

【参考方案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),