如何使用BitmapDescriptor.fromAssetImage（）设置自定义标记图标？

Question

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

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

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

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

Answer 1

更好的解决方案是将GoogleMap小部件包装在FutureBuilder 中。在单独的 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 2

在类中定义一个字段：

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