我使用google_maps_flutter在我的Flutter 翼应用程序使用谷歌 map ,我有自定义标记图标,我加载了BitmapDescriptor.fromAsset("images/car.png"),但是我的图标尺寸太大,我想把它变小,但我找不到任何选项,有没有任何选项,以改变自定义标记图标. 以下是我的Flutter 翼代码:

mapController.addMarker(
        MarkerOptions(
          icon: BitmapDescriptor.fromAsset("images/car.png"),

          position: LatLng(
            deviceLocations[i]['latitude'],
            deviceLocations[i]['longitude'],
          ),
        ),
      );

下面是我的Android模拟器的屏幕截图:

正如你在图片中看到的,我的自定义图标太大了

推荐答案

101: As long as are able to encode any image into raw bytes such as 100, you should be fine using it as a marker.


到目前为止,您可以使用Uint8List个数据通过Google Maps创建您的标记.这意味着只要您保持正确的编码格式(在此特定场景中,编码格式为png),您就可以使用raw数据绘制任何您想要的 map 标记.

我将介绍两个示例,在这两个示例中,您可以执行以下任一操作:

  1. Select 一个本地资源,并动态地将其大小更改为您想要的任何大小,并将其渲染到 map 上(一个Flutter 的徽标图像);
  2. 在画布上绘制一些东西,并将其渲染为标记,但这可以是any个渲染小部件.

除此之外,您甚至可以转换静电图像中的呈现小工具,因此也可以将其用作标记.


1.使用assets资源

首先,创建一个处理资源路径并接收大小的方法(可以是宽度、高度或两者,但只使用一个将保留比率).

import 'dart:ui' as ui;

Future<Uint8List> getBytesFromAsset(String path, int width) async {
  ByteData data = await rootBundle.load(path);
  ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List(), targetWidth: width);
  ui.FrameInfo fi = await codec.getNextFrame();
  return (await fi.image.toByteData(format: ui.ImageByteFormat.png)).buffer.asUint8List();
}

然后,只需使用正确的描述符将其添加到 map 中:

final Uint8List markerIcon = await getBytesFromAsset('assets/images/flutter.png', 100);
final Marker marker = Marker(icon: BitmapDescriptor.fromBytes(markerIcon));

这将分别为50、100和200宽度生成以下内容.

asset_example


2.使用画布

你可以用画布画任何你想画的东西,然后用它做记号.下面将生成一些简单的圆形框,其中包含Hello world!个文本.

首先,用画布画一些东西:

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(20.0);
  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: 'Hello world',
    style: TextStyle(fontSize: 25.0, color: Colors.white),
  );
  painter.layout();
  painter.paint(canvas, Offset((width * 0.5) - painter.width * 0.5, (height * 0.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();
}

然后以同样的方式使用它,但这一次提供您想要的任何数据(例如,宽度和高度),而不是资源路径.

final Uint8List markerIcon = await getBytesFromCanvas(200, 100);
final Marker marker = Marker(icon: BitmapDescriptor.fromBytes(markerIcon));

这就是你要的.

canvas_example

Flutter相关问答推荐

修复容器`Text`和容器表单之间的重叠

错误:找不到字体功能类型.Ffltter Google_Fonts包错误

Fighter:基于ChangeNotifier状态动态更新AppBar中的图标

为什么Riverpod生成器在这种情况下不生成AsyncNotiator?

TextFormfield无法与自动路由一起正常工作

当键盘在抖动中打开时,如何才能看到包装在SingleChildScrollView中的列中的最后一个小工具?

运行调试flutter应用程序时出错:B/BL超出范围(最大+/-128MB)到'';

在带有 flutter 的 Native Android 中,EventChannel.EventSink 始终为 null

在 Flutter 中使用条件语句设置 ImageProvider Object 类型的背景图像

Flutter 包错误:此应用程序使用的是已弃用的 Android 嵌入版本

如何将此文本按钮剪辑在堆栈中的圆形头像上方?

如何更改中心的圆形进度指示器

容器在发布模式下显示灰色框(抖动)

如何在 Flutter 中使用简写 IF 禁用单选按钮?

如何在 flutter 中过滤 DateTime(intl)?

Flutter:制作自定义小部件的最佳做法是什么?

如何在 tabBar 中的选项卡之间制作垂直线?

我几乎每次都将 Stateless Widget 与 BLoC 一起使用.我错了吗?

setState 不会在第一次更新 - Flutter

Flutter Bloc Todo 示例 - 收听存储库中的单个 todo