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中生成标记，并分配Future的结果到GoogleMap小部件中的标记

FutureBuilder：

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

在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 3

您可以像这样使用它：

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

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

3 个答案: