如何在flutter中设置一个自定义图像作为gmap标记的图标？

mxg2im7a 于 2023-02-16 发布在 Flutter

关注(0)|答案(3)|浏览(147)

我想在flutter的gmap中添加一些标记。我试过这个代码，但它不起作用。我在pubspec中添加了链接，图片也在资产中。

Future<void> addMarker(
      LatLng mLatLng, String mTitle, String mDescription) async {
    BitmapDescriptor markerbitmap = await BitmapDescriptor.fromAssetImage(
      ImageConfiguration(),
      "assets/images/icons/pin.png",
    );
    setState(() async {
      _markers.clear();

      _markers.add(Marker(
          markerId:
              MarkerId((mTitle + "_" + _markers.length.toString()).toString()),
          position: mLatLng,
          infoWindow: InfoWindow(
            title: mTitle,
            snippet: mDescription,
          ),
          icon: markerbitmap //BitmapDescriptor.defaultMarker,
          ));
    });
  }

未在Map上添加标记，但在调试控制台中显示此错误
[错误：flutter/lib/ui/ui_dart_state. cc（198）]未处理的异常：setState（）回调参数返回了Future. E/flutter（7655）：_HomePageState#3d9e4上的setState（）方法是使用返回Future的闭包或方法调用的。可能它被标记为"async"。E/flutter（7655）：不要在setState（）调用中执行异步工作，而是先执行工作（不更新小部件状态），然后在setState（）调用中同步更新状态。E/flutter（7655）：#0状态. setState. package：flutter/.../小部件/框架. dart：1112 E/flutter（7655）：#1状态。setState包：flutter/.../小部件/框架。dart：1128 E/flutter（7655）：#2
添加标记包：mymapp/屏幕/主页. dart：417 E/ Flutter （7655）：E/扑动（7655）：E/方法通道#插件. flutter.开发人员/谷歌Map安卓系统_0（7655）：无法处理方法调用

flutter

来源：https://stackoverflow.com/questions/75448108/how-to-set-a-custom-image-as-icon-for-gmap-marker-in-flutter

3条答案

按热度按时间

kcrjzv8t1#

应该在initState中执行此操作

final _controller = Completer<GoogleMapController>();

 var _markers = const <Marker>{};
  Set<Marker> get markers => _markers;
  set markers(Set<Marker> val) {
    setState(() => _markers = val);
  }

...

  @override
  void initState() {
    initializeMap();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        ...
        markers: markers,
        ...
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
      ),
    );
  }

...

void initializeMap(){
 markers = {
     Marker(
       markerId: MarkerId(UniqueKey().toString()),
       icon: await BitmapDescriptor.fromAssetImage(
         const ImageConfiguration(),
         'assets/images/icons/pin.png',
       ),
       position: target.target,
       rotation: target.tilt,
     )
   };
}

赞(0）回复(0）举报 2023-02-16

9rygscc12#

出现此错误是因为您尝试在setState的块中使用“Async”。
你可以删除异步并修改你的代码如下：

Future<void> addMarker(
      LatLng mLatLng, String mTitle, String mDescription) async {
    BitmapDescriptor markerbitmap = await BitmapDescriptor.fromAssetImage(
      ImageConfiguration(),
      "assets/images/icons/pin.png",
    );
    setState(() *** ----- delete the async here {
      _markers.clear();

      _markers.add(Marker(
          markerId:
              MarkerId((mTitle + "_" + _markers.length.toString()).toString()),
          position: mLatLng,
          infoWindow: InfoWindow(
            title: mTitle,
            snippet: mDescription,
          ),
          icon: markerbitmap //BitmapDescriptor.defaultMarker,
          ));
    });
  }

赞(0）回复(0）举报 2023-02-16

iaqfqrcu3#

首先，创建一个处理资产路径并接收大小的方法（可以是宽度、高度或两者，但只使用其中一个将保留比率）。

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

参考：How to change the icon size of Google Maps marker in Flutter?

赞(0）回复(0）举报 2023-02-16

我来回答

如何在flutter中设置一个自定义图像作为gmap标记的图标？

3条答案

相关问题

热门标签

最新问答