Google maps 如何在flatter中自定义谷歌地图标记图标

我在我的flatter应用程序中使用google_maps_flatter来使用google map我有自定义标记图标，我用BitmapDescriptor.fromBytes（markerIcon）加载它，但我想用一些文本显示Url中的图标。这是我的颤振代码：

Map<MarkerId, Marker> markers =
  <MarkerId, Marker>{}; // CLASS MEMBER, MAP OF MARKS

void _add([center]) async {


for (int i = 0; i < sallersList.length; i++) {
  if (sallersList[i]["uID"] != currentUser.uid) {
    /*var request = await http.get(sallersList[i]["user_image"]);
    var bytes = await request.bodyBytes;*/

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

    var markerIdVal = sallersList[i]["uID"];
    final MarkerId markerId = MarkerId(markerIdVal);

    // creating a new MARKER
    final Marker marker = Marker(
      markerId: markerId,
      position: LatLng(
          sallersList[i]["latitude"], //+ sin(1 * pi / 6.0) / 20.0,
          sallersList[i]["longitude"] //+ cos(1 * pi / 6.0) / 20.0,
          ),
      // icon: BitmapDescriptor.fromBytes(bytes.buffer.asUint8List(),),
      icon: BitmapDescriptor.fromBytes(markerIcon),
      infoWindow: InfoWindow(
          title: sallersList[i]["user_name"],
          snippet: sallersList[i]["address"]),
      onTap: () {
       // print(sallersList[i]["uID"]);

        Navigator.of(context).push(new MaterialPageRoute(
            builder: (BuildContext context) =>
            new DirectDetails()));
      },
    );
    if (this.mounted)
      setState(() {
        // adding a new marker to map
        markers[markerId] = marker;
      });
  }
}
}


Future<Uint8List> getBytesFromCanvas(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: '1',
  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();
}

地图标记=
{}; // 类成员，标记地图
void _add（[center]）异步{
for（int i=0；i
新的DirectDetails（））；
},
);
如果（本安装）
设置状态（）{
//向地图添加新标记
markers[markerId]=标记器；
});
}
}
}
Future getBytesFromCanvas（整型宽度，整型高度）异步{
final ui.PictureRecorder PictureRecorder=ui.PictureRecorder（）；
最终画布=画布（pictureRecorder）；
最终油漆=油漆（）…颜色=颜色。蓝色；
最终半径=圆形半径（宽度/2）；
画布.绘图更正(
从矩形和角点更正(
Rect.fromLTWH（0.0,0.0，width.toDouble（），height.toDouble（）），
左上角：半径，
右上角：半径，
左下角：半径，
右下角：半径，
),
油漆）；
textpainer=textpainer（textDirection:textDirection.ltr）；
painter.text=TextSpan(
正文：“1”，
样式：TextStyle（字体大小：65.0，颜色：Colors.white），
);
painter.layout（）；
油漆工(
帆布，
偏移量（（宽度*0.5）-0.5倍宽度*0.5，
（高度*0.5）-油漆工高度*0.5）；
最终img=等待图片记录器.endRecording（）.toImage（宽度、高度）；
最终数据=等待img.toByteData（格式：ui.ImageByteFormat.png）；
返回data.buffer.asUint8List（）；
}

这就是我们想要实现的目标

这就是我能够做到的。

是否有可能通过颤振或任何可以在飞行中创建图像的外部图像依赖来实现相同的效果

使用图像包，如im

下载图像 文件f=等待下载文件（url，“边框”）； im.Image img=im.decodeImage（f.readAsBytesSync（））

使用drawString（）在其上写入数字

BitmapDescriptor.fromBytes（im.encodePng（img））

静态变量httpClient=newhttpclient（）

Future\u下载文件（字符串url、字符串文件名）异步{
var request=wait-httpClient.getUrl（Uri.parse（url））；
var response=wait request.close（）；
var bytes=等待合并HttpClientResponseBytes（响应）；
字符串dir=（等待getApplicationDocumentsDirectory（））.path；
File File=新文件（“$dir/$filename”）；
等待文件。writeAsBytes（字节）；
返回文件；
}

要实现上述造型休闲步骤，请执行以下步骤：

导入包

（可选）添加辅助函数以通过路径获取图像

像这样使用它

注意：

---

带有数字的标记被“松散地”放置，用于演示目的-您可能需要对其进行不同的样式设置，以便它随内容扩展。

在画布上绘制图像需要启用软件渲染。e、 g.颤振运行——启用软件渲染。只需在没有谷歌地图的空白项目上复制你的代码，检查它是否正确绘制图像。当我们有许多图标需要刷新和绘制时，这会陷入困境吗？如何向自定义标记添加阴影？我是说真正的阴影，除了那个带不透明的蓝色圆圈。

Future<File> _downloadFile(String url, String filename) async {
    var request = await httpClient.getUrl(Uri.parse(url));
    var response = await request.close();
    var bytes = await consolidateHttpClientResponseBytes(response);
    String dir = (await getApplicationDocumentsDirectory()).path;
    File file = new File('$dir/$filename');
    await file.writeAsBytes(bytes);
    return file;
  }

import 'dart:async';
import 'dart:ui' as ui;
import 'dart:typed_data';
import 'dart:io';
import 'package:flutter/material.dart';

Future<ui.Image> getImageFromPath(String imagePath) async {
    File imageFile = File(imagePath);

    Uint8List imageBytes = imageFile.readAsBytesSync();

    final Completer<ui.Image> completer = new Completer();

    ui.decodeImageFromList(imageBytes, (ui.Image img) {
      return completer.complete(img);
    });

    return completer.future;
}

Future<BitmapDescriptor> getMarkerIcon(String imagePath, Size size) async {
    final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
    final Canvas canvas = Canvas(pictureRecorder);

    final Radius radius = Radius.circular(size.width / 2);

    final Paint tagPaint = Paint()..color = Colors.blue;
    final double tagWidth = 40.0;

    final Paint shadowPaint = Paint()..color = Colors.blue.withAlpha(100);
    final double shadowWidth = 15.0;

    final Paint borderPaint = Paint()..color = Colors.white;
    final double borderWidth = 3.0;

    final double imageOffset = shadowWidth + borderWidth;

    // Add shadow circle
    canvas.drawRRect(
        RRect.fromRectAndCorners(
          Rect.fromLTWH(
              0.0,
              0.0,
              size.width,
              size.height
          ),
          topLeft: radius,
          topRight: radius,
          bottomLeft: radius,
          bottomRight: radius,
        ),
        shadowPaint);

    // Add border circle
    canvas.drawRRect(
        RRect.fromRectAndCorners(
          Rect.fromLTWH(
              shadowWidth,
              shadowWidth,
              size.width - (shadowWidth * 2),
              size.height - (shadowWidth * 2)
          ),
          topLeft: radius,
          topRight: radius,
          bottomLeft: radius,
          bottomRight: radius,
        ),
        borderPaint);

    // Add tag circle
    canvas.drawRRect(
        RRect.fromRectAndCorners(
          Rect.fromLTWH(
              size.width - tagWidth,
              0.0,
              tagWidth,
              tagWidth
          ),
          topLeft: radius,
          topRight: radius,
          bottomLeft: radius,
          bottomRight: radius,
        ),
        tagPaint);

    // Add tag text
    TextPainter textPainter = TextPainter(textDirection: TextDirection.ltr);
    textPainter.text = TextSpan(
      text: '1',
      style: TextStyle(fontSize: 20.0, color: Colors.white),
    );

    textPainter.layout();
    textPainter.paint(
        canvas,
        Offset(
            size.width - tagWidth / 2 - textPainter.width / 2,
            tagWidth / 2 - textPainter.height / 2
        )
    );

    // Oval for the image
    Rect oval = Rect.fromLTWH(
        imageOffset,
        imageOffset,
        size.width - (imageOffset * 2),
        size.height - (imageOffset * 2)
    );

    // Add path for oval image
    canvas.clipPath(Path()
      ..addOval(oval));

    // Add image
    ui.Image image = await getImageFromPath(imagePath); // Alternatively use your own method to get the image
    paintImage(canvas: canvas, image: image, rect: oval, fit: BoxFit.fitWidth);

    // Convert canvas to image
    final ui.Image markerAsImage = await pictureRecorder.endRecording().toImage(
        size.width.toInt(),
        size.height.toInt()
    );

    // Convert image to bytes
    final ByteData byteData = await markerAsImage.toByteData(format: ui.ImageByteFormat.png);
    final Uint8List uint8List = byteData.buffer.asUint8List();

    return BitmapDescriptor.fromBytes(uint8List);
}

final Marker marker = Marker(
      icon: await getMarkerIcon("path/to/your/image.png", Size(150.0, 150.0))
);