如何使用 BitmapDescriptor.fromAssetImage() 设置自定义 Marker 图标？

Question

我正在尝试在我的 Flutter 应用中为我的地图标记设置一个自定义图标。由于 BitmapDescriptor.fromAsset() 已被弃用，我正在努力寻找如何使用 BitmapDescriptor.fromAssetImage().

我没有找到任何关于此的文档或 Whosebug 问题。

这是我当前创建它的方式（没有自定义图像）：

Marker(
          markerId: MarkerId(pos.toString()),
          position: pos,
          infoWindow: InfoWindow(
            title: store['store_name'],
            snippet: '',
          ),
          icon: BitmapDescriptor.defaultMarker));

Answer 1

在Class中定义一个字段：

BitmapDescriptor myIcon;

在地图准备好之前检索图标。

@override
void initState() {
    BitmapDescriptor.fromAssetImage(
        ImageConfiguration(size: Size(48, 48)), 'assets/my_icon.png')
        .then((onValue) {
      myIcon = onValue;
    });
 }

设置图标：

icon: myIcon;

请确保您已在 pubspec.yaml

的 Flutter 部分设置图标

 assets:
    - assets/my_icon.png

Answer 2

更好的解决方案是将 GoogleMap 小部件包装在 FutureBuilder 中。在单独的 Future 中生成你的标记，并分配 future 的结果到 GoogleMap 小部件中的标记

未来建设者：

FutureBuilder(
  future: generateMarkers(positions),
  initialData: Set.of(<Marker>[]),
  builder: (context, snapshot) => GoogleMap(        
    initialCameraPosition: CameraPosition(target: LatLng(0, 0)),
    markers: snapshot.data,
  ),
);

标记生成器：

Future<Set<Marker>> generateMarkers(List<LatLng> positions) async {
List<Marker> markers = <Marker>[];
for (final location in positions) {    
  final icon = await BitmapDescriptor.fromAssetImage(
      ImageConfiguration(size: Size(24, 24)), 'assets/my_icon.png');

  final marker = Marker(
    markerId: MarkerId(location.toString()),
    position: LatLng(location.latitude, location.longitude),
    icon: icon,
  );

  markers.add(marker);
}

return markers.toSet();

}

Answer 3

您可以像这样使用它：

Marker marker = Marker(
        icon: await BitmapDescriptor.fromAssetImage(
            ImageConfiguration(size: Size(48, 48)), 'assets/images/pin.png'
        )
    );

如何使用 BitmapDescriptor.fromAssetImage() 设置自定义 Marker 图标？

How to use BitmapDescriptor.fromAssetImage() to set a custom Marker icon?

google-maps-markers

dart

flutter