svg - 如何在 google_maps_flutter Flutter 插件中使用 SVG 标记？

Question

我希望使用 .svg 图像作为图标放置标记。我正在使用 google_maps_flutter 库。这适用于 .png 转换后的图像，但我没有找到直接使用 .svg 文件的方法。

阅读此问题后，我在这里发帖:Using SVG markers in google_maps_flutter Flutter plugin

并尝试使用此线程中描述的 fromAssetImage 方法:How to change the icon size of Google Map marker in Flutter?

我希望这个新版本的库能帮助解决我的问题。

我尝试使用以下代码解决它:

MapWidget 类

for (Place place in widget.places) {
          place.toMarker(
            context,
            () => _onPlaceTapped(place),
          ).then(setState((){
            markerSet.add
          }));
      }

地点类(class)

Future<Marker> toMarker(BuildContext context, VoidCallback onTap) async {
    return Marker(
      markerId: MarkerId(id.toString()),
      position: LatLng(lat, lon),
      icon: await category.markerIcon(createLocalImageConfiguration(context)),
      onTap: onTap,
    );

品类类

Future<BitmapDescriptor> markerIcon(ImageConfiguration configuration) async {
    BitmapDescriptor b;
    switch (type) {
      case CategoryType.FirstCategory:
        b = await BitmapDescriptor.fromAssetImage(configuration, 'assets/markers/marker-first.svg');
        break;
      case CategoryType.SecondCategory:
        b = await BitmapDescriptor.fromAssetImage(configuration, 'assets/markers/marker-second.svg');
        break;
      default:
        b = await BitmapDescriptor.fromAssetImage(configuration, 'assets/markers/marker-third.svg');
        break;
    }

    return b;
  }

如果您想知道，图像的路径已经添加到 pubspec.yaml 中。

我希望 map 上的一些自定义标记(每个自定义标记上应该有一个小图标图像)替换默认的红色谷歌标记，但是只显示默认标记(不是 switch 语句中的默认标记，我说的是谷歌的默认标记)。

使用 iOS 模拟器和 google_maps_flutter 0.5.15+1 库版本没有错误信息。

Answer 1

你可以在这里找到这个问题的答案:

Using SVG markers in google_maps_flutter Flutter plugin

我尝试了 rednuht 的答案，它的作用就像一个魅力。

编辑(回顾)

答案需要使用 flutter_svg 插件(^0.13 或 0.14.1 似乎对我自己有用)。

首先，创建一个函数，该函数将为您提供 Assets 的 BitmapDescriptor。确保 Assets 在您的 pubspec 文件中声明。

import 'dart:ui' as ui;
import 'package:flutter/services.dart';
import 'package:flutter_svg/flutter_svg.dart';


Future<BitmapDescriptor> _bitmapDescriptorFromSvgAsset(BuildContext context, String assetName) async {
    String svgString = await DefaultAssetBundle.of(context).loadString(assetName);
    //Draws string representation of svg to DrawableRoot
    DrawableRoot svgDrawableRoot = await svg.fromSvgString(svgString, null);
    ui.Picture picture = svgDrawableRoot.toPicture();
    ui.Image image = await picture.toImage(26, 37);
    ByteData bytes = await image.toByteData(format: ui.ImageByteFormat.png);
    return BitmapDescriptor.fromBytes(bytes.buffer.asUint8List());
}

我在我的应用程序开始时实例化了一个 Map 对象，这样我就可以使用 BitmapDescriptors 而不使用大量的 async/await 调用。

data_model.dart

Map<CategoryType, BitmapDescriptor> descriptors = Map<Category, BitmapDescriptor>();

Future<void> loadBitmapDescriptors(context) async {
    descriptors[CategoryType.FirstCatgory] = await _bitmapDescriptorFromSvgAsset(context, 'assets/markers/marker-first.svg');
    descriptors[CategoryType.SecondCategory] = await _bitmapDescriptorFromSvgAsset(context, 'assets/markers/marker-second.svg');
    descriptors[CategoryType.ThirdCategory] = await _bitmapDescriptorFromSvgAsset(context, 'assets/markers/marker-third.svg');
  }

main.dart

DataModel.of(context).loadBitmapDescriptors(context);

所以在那之后我要做的就是在需要时正确调用它。

Marker marker = Marker(markerId: MarkerId(id.toString()), icon: descriptors[category], position: LatLng(lat, lon));