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

问题描述

我在Flutter应用程序中使用 google_maps_flutter 来使用google map我有自定义标记图标，并使用 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 Maps创建标记。这意味着您可以使用 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.

因此，首先绘制

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屋！