如何在 flutter 中为 google 地图创建自定义图像标记并在自定义小部件中使用它？

Question

如何使用 custom widget 作为 flutter google map 中的市场作为下图或如何实现下图作为 flutter 中的输出？

这是my first time working with maps in flutter。我知道我需要将图像转换为 Unit8List 但那只是图像！如何在自定义小部件中使用图像？

图片来自网络api调用，格式为base46字符串。

Answer 1

如果您使用的是 google_maps_flutter 包，您可以通过为您的图标使用 BitmapDescriptor 来使用您自己的图像创建自定义标记。首先，您需要在 flutter: 部分下的 pubspec.yaml 上定义 assets/images：

flutter:
# To add assets to your application, add an assets section, like this:
  assets:
   - assets/images/

然后，定义一个 BitmapDescriptor 变量以在加载地图之前将图标存储在 main.dart 上，如下所示：

 // Custom marker icon
 BitmapDescriptor icon;

 // List for storing markers
 List<Marker> allMarkers = [];

 @override
   void initState() {
     super.initState();
     BitmapDescriptor.fromAssetImage(
        ImageConfiguration(), 'assets/images/icon.png')
        .then((value) => icon = value);
 }

最后，您可以使用 setState:

在 onMapCreated 方法下的 GoogleMap 小部件上添加带有自定义图标的标记

GoogleMap(
  initialCameraPosition: _initialLocation,
  mapType: MapType.normal,
  markers: Set.from(allMarkers),
  onMapCreated: (GoogleMapController controller) {
    mapController = controller;
     
    setState(() {
       // add marker 
       allMarkers.add(Marker(
          markerId: MarkerId('Google'),
          draggable: false,
          icon: icon,
          position: LatLng(37.422066,-122.08409)));
       });
    },
),

编辑：

您还可以使用 http package 从 URL 加载图像，然后将响应传递给 BitmapDescriptor.fromBytes(bytes);:

final Response response = await get("imageUrl");
icon = await BitmapDescriptor.fromBytes(response.bodyBytes);

Answer 2

经过数小时的测试，我得到的工作解决方案是 masking + adding border 根据服务器端映像的要求。因为我已经能够将图像转换为 BitmapDescriptor。如此简单，现在我得到了想要的输出。

注意：我还能够将 base64 图像字符串转换为图像并使其在移动应用程序中运行。问题是有时显示有时不显示。随着图像数量的增加，问题也随之增加。因此，上述解决方案是可以简单实用地实施的最佳解决方案。

如何在 flutter 中为 google 地图创建自定义图像标记并在自定义小部件中使用它？

How to create custom Image Marker for google map in flutter and us it inside custom widget?

google-maps

widget

google-maps-markers

dart

flutter