我想在flutter開發的google地圖中的自定義標記中添加數字。 我在下面分享了我的完整源代碼。所以請幫助我，如何修改我的源代碼以解決我的問題。 我的依賴性：
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(
標記(
markerId: MarkerId("marker_id")。
位置。_latLng,
icon: markerIcon,
),
);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
標題。Text('Custom Marker Icon Example')。
backgroundColor: Colors.red,
),
body: GoogleMap(
onMapCreated: (GoogleMapController控制器) {
_addMarkers();
},
markers: _markers,
initialCameraPosition: CameraPosition()
目標。_latLng,
zoom: _zoom,
),
),
);
}
}
現在輸出。
。
但我想輸出如下圖片。
如何修改我的代碼？
uj5u.com熱心網友回復：
嘗試用這個代替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.round(width/2)。
canvas.drawRect(
RRect.fromRectAndCorners(
Rect.fromLTWH(0.0, 0.0, width.toDouble(), height.toDouble() ）。)
topLeft: 半徑。
右上：半徑。
BottomLeft: 半徑。
右下角：半徑。
),
paint）。)
TextPainter painter = TextPainter（textDirection: TextDirection.ltr）。
painter.text = TextSpan(
text: customNum.toString(), // your custom number here.
風格。TextStyle(fontSize: 65.0, color: Colors.white),
);
painter.layout()。
painter.paint(
畫布。
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)。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/332610.html
標籤：