如何在 Flutter 中更改 Google Maps 标记的图标大小? [英] How to change the icon size of Google Maps marker in Flutter?

问题描述

我在我的 flutter 应用程序中使用 google_maps_flutter 来使用谷歌地图我有自定义标记图标，我用 BitmapDescriptor.fromAsset("images/car.png") 加载它 但是我在地图上的图标尺寸太大了我想让它变小但我找不到任何选项是否有任何选项可以更改自定义标记图标.这是我的颤振代码:

I am using google_maps_flutter in my flutter app to use google map I have custom marker icon and I load this with BitmapDescriptor.fromAsset("images/car.png") however my icon size on map is too big I want to make it smaller but I couldn't find any option for that is there any option to change custom marker icon. here is my flutter code:

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

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

这是我的 android 模拟器的屏幕截图:

And here is a screenshot of my android emulator:

正如你在图片中看到的，我的自定义图标尺寸太大

As you can see in the picture my custom icon size is too big

推荐答案

TL;DR:只要能够将任何图像编码为原始字节，例如 Uint8List，你应该可以用它作为标记.

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

截至目前，您可以使用 Uint8List 数据通过 Google 地图创建标记.这意味着你可以使用 raw 数据来绘制任何你想要的地图标记，只要你保持正确的编码格式(在这个特定的场景中，它是一个 png).

As of now, you can use Uint8List data to create your markers with Google Maps. That means that you can use raw data to paint whatever you want as a map marker, as long as you keep the right encode format (which in this particular scenario, is a png).

我将通过两个示例，您可以:

I will go through two examples where you can either:

1. 选择一个本地资源并动态地将其大小更改为您想要的任何大小并将其呈现在地图上(Flutter 徽标图像)；
2. 在画布中绘制一些东西并将其渲染为标记，但这可以是任何渲染小部件.

1. Pick a local asset and dynamically change its size to whatever you want and render it on the map (a Flutter logo image);
2. Draw some stuff in canvas and render it as marker as well, but this can be any render widget.

除此之外，您甚至可以在静态图像中转换渲染小部件，因此也可以将其用作标记.

Besides this, you can even transform a render widget in an static image and thus, use it as marker too.

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

First, create a method that handles the asset path and receives a size (this can be either the width, height, or both, but using only one will preserve ratio).

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();
}

然后，只需使用正确的描述符将其添加到您的地图中:

Then, just add it to your map using the right descriptor:

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

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

This will produce the following for 50, 100 and 200 width respectively.

您可以用画布绘制任何您想要的东西，然后将其用作标记.下面将生成一些简单的圆形框，其中包含 Hello world! 文本.

You can draw anything you want with canvas and then use it as a marker. The following will produce some simple rounded box with a Hello world! text in it.

所以，首先使用画布绘制一些东西:

So, first just draw some stuff using the canvas:

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();
}

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

and then use it the same way, but this time providing any data you want (eg. width and height) instead of the asset path.

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

给你.

这篇关于如何在 Flutter 中更改 Google Maps 标记的图标大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！