android - add number within custom marker in google map at flutter?
问题描述
I want to add number within my custom marker in google map at flutter development. I have shared my complete source below. so please help me, how to modify my source for solving my problem. thanks my dependencies:
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,
),
),
);
}
}
now output:
but i want to output like below image:
how to modify my code?
解决方案
Try this instead of 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();
}
to create your Icon
Uint8List markerIcon = await getBytesFromCanvas(1, 150, 150);
And set your icon
icon: BitmapDescriptor.fromBytes(markerIcon),
推荐阅读
- java - 使用不同的 Spring Boot 插件 Gradle 多个子项目
- wpf - 通过转换器从DataGrid中的2计算一列
- git - 管道到“head”时在“git log”中保持颜色(osx)
- javascript - 如何使用 filter() 方法迭代数组中的两个数组
- macos - mac 目录上的 jenkins slave 无法访问
- django - 如何基于另一个模型在用户中设置属性?[ django ]
- json - 如何在 Azure ARM 模板中选择 VM T 恤尺寸
- jquery - 如何用 div 文本替换表单文本字符串
- javascript - 为什么将 Array.of() 应用于 Object 会在 JavaScript/ECMAScript 中创建 Number
- c# - 在 .net 中一次访问两个表