【问题标题】:How to change the icon size of Google Maps marker in Flutter?如何在 Flutter 中更改谷歌地图标记的图标大小?
【发布时间】:2019-05-07 02:06:08
【问题描述】:

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

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

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

这是我的安卓模拟器的截图:

如图所示,我的自定义图标太大了

【问题讨论】:

  • 以更小的尺寸保存您的 PNG?
  • @MrUpsidown 我应该如何处理不同分辨率的设备
  • 我实际上自己创建了一个 PR (github.com/flutter/plugins/pull/815) 来提供一种使用字节作为替代方案的方法,使其更加动态(BitmapDescriptor.fromBytes()) 但是由于 iOS仍然失踪(我可能会在几天内完成)。目前,恐怕除了缩小资产之外,您别无选择。
  • @moonvader 好的,当然。如果可以的话,请在周一晚上之前记住我,我会发布一个,因为我现在无法访问我的机器。
  • @MiguelRuivo 星期一

标签: google-maps flutter dart


【解决方案1】:

TL;DR:只要能够将任何图像编码为原始字节,例如Uint8List,您就可以将其用作标记。


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

我将举两个例子,你可以:

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

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


1。使用资产

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

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

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

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

这将分别产生 50、100 和 200 宽度的以下内容。


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

给你。

【讨论】:

  • 谢谢,这太棒了。在第一个示例中,targetWidth 不起作用
  • 谁能告诉我如何改变宽度?
  • 你可以设置宽度,而不是设置高度,甚至两者都设置。
  • 为什么会抛出一个错误,说Uint8List is not a subtype of Future&lt;Uint8List&gt;我尝试投射,它对我不起作用google_maps_flutter: ^0.5.19+2
  • 这是一个很好的解决方案,但标记在 Google Maps for Flutter 中的实现非常糟糕。看看 React 版本、组件或替代 Map 插件,它们的处理能力要好得多(Marker 只是一个带有 lat、long 的小部件;谁在乎孩子是什么。)
【解决方案2】:

我已经更新了上面的功能,现在你可以随意缩放图像了。

  Future<Uint8List> getBytesFromCanvas(int width, int height, urlAsset) async {
    final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
    final Canvas canvas = Canvas(pictureRecorder);

    final ByteData datai = await rootBundle.load(urlAsset);
    var imaged = await loadImage(new Uint8List.view(datai.buffer));
    canvas.drawImageRect(
      imaged,
      Rect.fromLTRB(
          0.0, 0.0, imaged.width.toDouble(), imaged.height.toDouble()),
      Rect.fromLTRB(0.0, 0.0, width.toDouble(), height.toDouble()),
      new Paint(),
    );

    final img = await pictureRecorder.endRecording().toImage(width, height);
    final data = await img.toByteData(format: ui.ImageByteFormat.png);
    return data.buffer.asUint8List();
  }

【讨论】:

  • loadImage 错误:加载图像方法参考。 gist.github.com/netsmertia/9c588f23391c781fa1eb791f0dce0768
  • @NavinKumar 抱歉,我不知道您的问题。我的代码仅用于加载“png”文件,这就是原因。
  • 什么是“loadImage()”方法?它没有定义
  • 你自己写一份,也可以在本页复制一份。
【解决方案3】:

这是 2020 年 5 月添加自定义 Google 地图标记的示例。

我的示例应用程序:

进口:

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

在您的主要有状态类中的某处实例化您的标记图:

Map<MarkerId, Marker> markers = <MarkerId, Marker>{};

将图标资源转换为 Uint8List 对象的函数(完全不复杂/s):

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

添加标记函数(使用您想要标记的位置的纬度和经度坐标调用此函数)

  Future<void> _addMarker(tmp_lat, tmp_lng) async {
    var markerIdVal = _locationIndex.toString();
    final MarkerId markerId = MarkerId(markerIdVal);
    final Uint8List markerIcon = await getBytesFromAsset('assets/img/pin2.png', 100);

    // creating a new MARKER
    final Marker marker = Marker(
      icon: BitmapDescriptor.fromBytes(markerIcon),
      markerId: markerId,
      position: LatLng(tmp_lat, tmp_lng),
      infoWindow: InfoWindow(title: markerIdVal, snippet: 'boop'),
    );

    setState(() {
      // adding a new marker to map
      markers[markerId] = marker;
    });
  }

pubspec.yaml(随意尝试不同的图标)

flutter:

  uses-material-design: true

  assets:
    - assets/img/pin1.png
    - assets/img/pin2.png

【讨论】:

  • 谢谢!我一直在努力正确调整大小的标记。目前,这似乎有效。使用 screenWidth / 3.2 作为尺寸。
  • @Alex 你有没有向 Flutter Web 开发者提交错误报告?它应该。
  • @IanSmith ...this is currently not implemented on web... 但也许他们有一天会添加它
  • 太棒了,喜欢它)
【解决方案4】:

我有同样的问题,我用这种方法解决。

Future < Uint8List > getBytesFromCanvas(int width, int height, urlAsset) async 
{
    final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
    final Canvas canvas = Canvas(pictureRecorder);
    final Paint paint = Paint()..color = Colors.transparent;
    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);

    final ByteData datai = await rootBundle.load(urlAsset);

    var imaged = await loadImage(new Uint8List.view(datai.buffer));

    canvas.drawImage(imaged, new Offset(0, 0), new Paint());

    final img = await pictureRecorder.endRecording().toImage(width, height);
    final data = await img.toByteData(format: ui.ImageByteFormat.png);
    return data.buffer.asUint8List();
}

Future < ui.Image > loadImage(List < int > img) async {
    final Completer < ui.Image > completer = new Completer();
    ui.decodeImageFromList(img, (ui.Image img) {

        return completer.complete(img);
    });
    return completer.future;
}

你可以这样使用。

final Uint8List markerIcond = await getBytesFromCanvas(80, 98, urlAsset);

setState(() {

    markersMap[markerId] = Marker(
        markerId: MarkerId("marker_${id}"),
        position: LatLng(double.parse(place.lat), double.parse(place.lng)),

        icon: BitmapDescriptor.fromBytes(markerIcond),
        onTap: () {
            _onMarkerTapped(placeRemote);
        },

    );
});

【讨论】:

  • 如果你想扩展看看@xuetongqin的答案
【解决方案5】:

给出的所有答案都是完美的,但我注意到当您将targetWidth 设置为指定数字时,您可能会遇到具有不同devicePixelRatio 的不同手机的问题。所以这就是我实现它的方式。

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


  Future<Uint8List> getBytesFromAsset(String path) async {
    double pixelRatio = MediaQuery.of(context).devicePixelRatio;
    ByteData data = await rootBundle.load(path);
    ui.Codec codec = await ui.instantiateImageCodec(
        data.buffer.asUint8List(),
        targetWidth: pixelRatio.round() * 30
    );
    ui.FrameInfo fi = await codec.getNextFrame();
    return (await fi.image.toByteData(format: ui.ImageByteFormat.png)).buffer.asUint8List();
  }

并使用这样的方法

final Uint8List markerIcon = await getBytesFromAsset('assets/images/bike.png');

Marker(icon: BitmapDescriptor.fromBytes(markerIcon),)

这给了我一个动态大小,取决于devicePixelRatio

这对我来说非常有效。

【讨论】:

    【解决方案6】:

    BitmapDescriptor.fromAsset() 是添加标记的正确方法,但存在一个影响您的代码的开放错误。正如 Saed 所回答的,您需要为不同的设备屏幕密度提供不同尺寸的图像。根据您提供的图像,我猜您想要的图像的基本尺寸约为 48 像素。因此,您需要制作大小为 48、96 (2.0x) 和 144 (3.0x) 的副本。

    运行时应根据屏幕密度选择正确的一个。见https://flutter.dev/docs/development/ui/assets-and-images#declaring-resolution-aware-image-assets

    目前,这在 Android 或 Fuschia 上不会自动完成。如果您现在发布并想解决这个问题,您可以使用以下逻辑检查平台:

        MediaQueryData data = MediaQuery.of(context);
        double ratio = data.devicePixelRatio;
    
        bool isIOS = Theme.of(context).platform == TargetPlatform.iOS;
    

    如果平台不是 iOS,您将在代码中实现存储桶。将逻辑合二为一:

    String imageDir(String prefix, String fileName, double pixelRatio, bool isIOS) {
        String directory = '/';
        if (!isIOS) {
            if (pixelRatio >= 1.5) {
                directory = '/2.0x/';
            }
            else if (pixelRatio >= 2.5) {
                directory = '/3.0x/';
            }
            else if (pixelRatio >= 3.5) {
                directory = '/4.0x/';
            }
        }
        return '$prefix$directory$fileName';
    }
    

    然后,您可以使用以下代码在资产目录 **assets/map_icons/** 中为名为 person_icon 的图标创建一个标记,使用方法:

                myLocationMarker = Marker(
                markerId: MarkerId('myLocation'),
                position: showingLocation, flat: true,
                icon: BitmapDescriptor.fromAsset(imageDir('assets/map_icons','person_icon.png', ratio, isIos)));
    

    【讨论】:

      【解决方案7】:

      为不同密度选择正确图像的方法对我有用:

      MediaQueryData mediaQueryData = MediaQuery.of(context);
      ImageConfiguration imageConfig = ImageConfiguration(devicePixelRatio: mediaQueryData.devicePixelRatio);
      BitmapDescriptor.fromAssetImage(imageConfig, "assets/images/marker.png");
      

      【讨论】:

        【解决方案8】:

        我将添加一个混合了来自任何地方的多个想法和代码的解决方案来解决这个问题,首先是一个管理图像大小的功能:

        Future<Uint8List> getBytesFromCanvas(double escala, urlAsset) async {
        
          final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
          final Canvas canvas = Canvas(pictureRecorder);
        
          final ByteData datai = await rootBundle.load(urlAsset);
          var imaged = await loadImage(new Uint8List.view(datai.buffer));
        
          double width = ((imaged.width.toDouble() * escala).toInt()).toDouble();
          double height = ((imaged.height.toDouble() * escala).toInt()).toDouble();
        
          canvas.drawImageRect(imaged, Rect.fromLTRB(0.0, 0.0, imaged.width.toDouble(), imaged.height.toDouble()),
                                      Rect.fromLTRB(0.0, 0.0, width, height),
                                      new Paint(),
          );
        
          final img = await pictureRecorder.endRecording().toImage(width.toInt(), height.toInt());
          final data = await img.toByteData(format: ui.ImageByteFormat.png);
          return data.buffer.asUint8List();
        
        }
        
        Future < ui.Image > loadImage(List < int > img) async {
          final Completer < ui.Image > completer = new Completer();
          ui.decodeImageFromList(img, (ui.Image img) {
        
            return completer.complete(img);
          });
          return completer.future;
        }
        

        然后根据设备IOS或Android应用此功能。 getBytesFromCanvas() 函数有两个参数,图片真实大小的比例和资产 url。

        var iconTour;
        
        bool isIOS = Theme.of(context).platform == TargetPlatform.iOS;
        if (isIOS){
        
          final markerIcon = await getBytesFromCanvas(0.7, 'images/Icon.png');
          iconTour = BitmapDescriptor.fromBytes(markerIcon);
        
        }
        else{
        
          final markerIcon = await getBytesFromCanvas(1, 'images/Icon.png');
          iconTour = BitmapDescriptor.fromBytes(markerIcon);
        
        }
        
        setState(() {
          final Marker marker = Marker(icon: iconTour);
        });
        

        就是这样。

        【讨论】:

          【解决方案9】:

          所以你可以试试丑陋的方式。 MediaQuery 将返回比率并手动检查条件类似这样

           double mq = MediaQuery.of(context).devicePixelRatio;
           String icon = "images/car.png";
           if (mq>1.5 && mq<2.5) {icon = "images/car2.png";}
           else if(mq >= 2.5){icon = "images/car3.png";}
            mapController.addMarker(
              MarkerOptions(
                 icon: BitmapDescriptor.fromAsset(icon),
                 position: LatLng(37.4219999, -122.0862462),
               ),
             );
          

          您需要在您的图像文件夹中添加不同的资产图像,例如

          -images/car.png
          -images/car2.png
          -images/car3.png
          

          【讨论】:

          • Flutter 会自动执行此操作,请参阅我的回复。如果您将图像保存在正确的文件夹中,flutter 将以正确的分辨率加载正确的图像
          • 不要以大写字母开头命名变量。只是不要'。
          • @egorikem 好点,下次你发现类似的东西时,请考虑编辑问题或答案。
          【解决方案10】:

          试试 BitmapDescriptor.fromAssetImage。它也会忽略图像大小。

          BitmapDescriptor.fromAssetImage(
                      ImageConfiguration(size: Size(32, 32)), 'assets/car.png')
                  .then((onValue) {
                setState(() {
                  markerIcon = onValue;
                });
              });
          

          同样使用默认配置失败。

          loadMarkerImage(BuildContext context) {
              var config = createLocalImageConfiguration(context, size: Size(30, 30));
              BitmapDescriptor.fromAssetImage(config, 'assets/car.png')
                  .then((onValue) {
                setState(() {
                  markerIcon = onValue;
                });
              });
            }
          

          【讨论】:

            【解决方案11】:

            我找到了解决这个问题的最简单方法。

            我使用以下版本来实现谷歌地图。在较低版本的谷歌地图 BitmapDescriptor.fromBytes 中不起作用。

             google_maps_flutter: ^0.5.19
            

            并设置标记点,如

            Future setMarkersPoint() async {
              var icon = 'your url';
              Uint8List dataBytes;
              var request = await http.get(icon);
              var bytes = await request.bodyBytes;
            
              setState(() {
                dataBytes = bytes;
              });
            
              final Uint8List markerIcoenter code heren =
                  await getBytesFromCanvas(150, 150, dataBytes);
            
              var myLatLong = LatLng(double.parse(-6.9024812),
                  double.parse(107.61881));
            
              _markers.add(Marker(
                markerId: MarkerId(myLatLong.toString()),
                icon: BitmapDescriptor.fromBytes(markerIcon),
                position: myLatLong,
               infoWindow: InfoWindow(
                 title: 'Name of location',
                snippet: 'Marker Description',
               ),
              ));
            

            }

            如果您想更改图标大小,请使用以下代码。

            Future<Uint8List> getBytesFromCanvas(
              int width, int height, Uint8List dataBytes) async {
            final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
            final Canvas canvas = Canvas(pictureRecorder);
            final Paint paint = Paint()..color = Colors.transparent;
            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);
            
            var imaged = await loadImage(dataBytes.buffer.asUint8List());
            canvas.drawImageRect(
              imaged,
              Rect.fromLTRB(
                  0.0, 0.0, imaged.width.toDouble(), imaged.height.toDouble()),
              Rect.fromLTRB(0.0, 0.0, width.toDouble(), height.toDouble()),
              new Paint(),
            );
            
                final img = await pictureRecorder.endRecording().toImage(width, height);
                final data = await img.toByteData(format: ui.ImageByteFormat.png);
                return data.buffer.asUint8List();
             }
            
                Future<ui.Image> loadImage(List<int> img) async {
                final Completer<ui.Image> completer = new Completer();
                ui.decodeImageFromList(img, (ui.Image img) {
              return completer.complete(img);
            });
            return completer.future;
            }
            

            希望它对你有用..!!

            【讨论】:

              【解决方案12】:

              由于 google_map_flutter 0.5.26,fromAsset() 已弃用,应替换为 fromAssetImage(),正如提到的其他一些答案。将fromAssetImage() 应用于不同分辨率设备的更优雅的方法是declare resolution-aware image assets。这个想法是 Flutter 使用逻辑像素渲染屏幕,如果我没记错的话,它大约是每英寸 72 像素,而现代移动设备每英寸可能包含超过 200 像素。使图像在具有不同像素密度的不同移动设备上看起来尺寸相似的解决方案是准备不同尺寸的同一图像的多个副本,其中在较低像素密度的设备上使用较小的图像,而在较高像素密度的设备上使用较大的图像。

              所以你应该准备例如以下图片

              images/car.png           <-- if this base image is 100x100px
              images/2.0x/car.png      <-- 2.0x one should be 200x200px
              images/3.0x/car.png      <-- and 3.0x one should be 300x300px
              

              并修改您的代码如下,createLocalImageConfiguration() 将根据 devicePixelRatio 应用正确的比例

              mapController.addMarker(
                      MarkerOptions(
                        icon: BitmapDescriptor.fromAssetImage(
                                createLocalImageConfiguration(context),
                                "images/car.png"),
                        position: LatLng(
                          deviceLocations[i]['latitude'],
                          deviceLocations[i]['longitude'],
                        ),
                      ),
                    );
              

              下面是最新google_map_flutter 1.0.3fromAssetImage()的实现。可以看到,BitmapDescriptor 的底层实现带有一个参数scale,这是获取正确图片大小的关键。

                static Future<BitmapDescriptor> fromAssetImage(
                  ImageConfiguration configuration,
                  String assetName, {
                  AssetBundle bundle,
                  String package,
                  bool mipmaps = true,
                }) async {
                  if (!mipmaps && configuration.devicePixelRatio != null) {
                    return BitmapDescriptor._(<dynamic>[
                      'fromAssetImage',
                      assetName,
                      configuration.devicePixelRatio,
                    ]);
                  }
                  final AssetImage assetImage =
                      AssetImage(assetName, package: package, bundle: bundle);
                  final AssetBundleImageKey assetBundleImageKey =
                      await assetImage.obtainKey(configuration);
                  return BitmapDescriptor._(<dynamic>[
                    'fromAssetImage',
                    assetBundleImageKey.name,
                    assetBundleImageKey.scale,
                    if (kIsWeb && configuration?.size != null)
                      [
                        configuration.size.width,
                        configuration.size.height,
                      ],
                  ]);
                }
              

              注意:您可以看到 ImageConfiguration 的 size 属性仅适用于 web。

              【讨论】:

                【解决方案13】:

                我发现解决这个问题的一个简单方法就是

                BitmapDescriptor get deliveryIcon {
                  bool isIOS = Theme.of(context).platform == TargetPlatform.iOS;
                  if (isIOS)
                    return BitmapDescriptor.fromAsset('assets/icons/orange_pin.png');
                  else
                    return BitmapDescriptor.fromAsset(
                        'assets/icons/3.0x/orange_pin.png');
                } 
                

                简单地说,为 android 提供更大的资源。

                【讨论】:

                  【解决方案14】:

                  应避免使用大图像,因为它们会占用不必要的空间。应根据您的地图缩放图像,并使用不同的像素分辨率来适应设备。

                  例如,应在应用程序之外将基本图像缩放到正确的大小。不同的设备有不同的像素分辨率,颤振迎合。需要不同版本的图像,以使图像不会出现锯齿状。为不同的分辨率放大图像。即基本版本 32x32 像素,版本 2.0 将是 64x64 像素,版本 3.0 将是 128x128 等。请参阅下面描述的标准颤振方式,它满足不同的像素分辨率,具体取决于设备制造商。

                  BitmapDescriptor.fromAsset 不支持像素分辨率的自动解码,会加载路径中指定的文件。更正此调用 AssetImage 以解码正确的文件名。

                  图像渲染存在错误,iOS 中的图像看起来比 Android 大,请参阅缺陷 24865。也有一个解决方法,通过硬编码您喜欢的分辨率的文件名。

                  以下部分概述了标准颤振方式AssetImage 解决方法和24865 解决方法

                  标准 Flutter 图像命名约定

                  创建一个命名为convention的资产文件夹:

                  pathtoimages/image.png
                  pathtoimages/Mx/image.png
                  pathtoimages/Nx/image.png
                  pathtoimages/etc.
                  

                  其中 M 和 N 是分辨率 (2.0x) 或主题(深色)。 然后将图像或所有图像添加到 pubspec.file 中

                  flutter:
                    assets:
                      - pathtoimages/image.png
                  

                  flutter:
                    assets:
                      - pathtoimages/
                  

                  Google 地图的解决方法

                  此标准要求使用 Google 地图插件不支持的 AssetImage('pathtoimages/image.png') 加载图像。 Google 地图要求您使用 BitmapDescriptor.fromAsset('pathtoimages/image.png'),此时无法解析为正确的图像。要解决此问题,您可以通过首先使用定义 here 的 BuildContext 创建LocalImageConfiguration 从 AssetImage 获取正确的图像。然后使用此配置解析正确的图像如下:

                  ImageConfiguration config = createLocalImageConfiguration(context);
                  AssetImage('pathtoimages/image.png')
                     .obtainKey(config)
                     .then((resolvedImage) {
                         print('Name: ' + resolvedImage.onValue.name);
                      });
                  

                  缺陷24865 解决方法

                   BitmapDescriptor get deliveryIcon {
                        bool isIOS = Theme.of(context).platform == TargetPlatform.iOS;
                            If (isIOS)
                                return BitmapDescriptor.fromAsset('pathtoimages/image.png');
                           else
                                return BitmapDescriptor.fromAsset(
                                resolvedImageName);
                      }
                  

                  【讨论】:

                    猜你喜欢
                    • 1970-01-01
                    • 2013-08-18
                    • 1970-01-01
                    • 2012-08-29
                    • 2017-03-02
                    • 2018-04-10
                    • 2013-10-15
                    • 1970-01-01
                    • 1970-01-01
                    相关资源
                    最近更新 更多