如何在颤动中为谷歌地图创建自定义图像标记，并在自定义小部件中创建它？答案

【问题标题】：How to create custom Image Marker for google map in flutter and us it inside custom widget?如何在颤动中为谷歌地图创建自定义图像标记，并在自定义小部件中创建它？
【发布时间】：2021-01-12 12:18:10
【问题描述】：

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

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

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

【问题讨论】：

标签： google-maps flutter dart widget google-maps-markers

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

如果您使用google_maps_flutter 包，您可以使用自己的图像创建自定义标记，方法是使用BitmapDescriptor 作为您的图标。首先，您需要在pubspec.yaml 的flutter: 部分下定义您的资产/图像：

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

【讨论】：

问题是图像是通过网络传输的，我想到了将图像作为base64 发送到 api 本身的想法，这样我就不需要等待图像加载。当前的问题是处理图像需要一些时间，这些图像没有显示很多次。
请问您目前是如何获取图像的？
您是否尝试过使用 http package 从 URL 获取图像，然后将响应中的字节传递给 BitmapDescriptor.fromBytes(); ？我编辑了我的答案以包含这个
正如我所说，问题不在于未获取图像。它没有被显示是问题。无论如何，我得到了答案，这是另一种选择。