Flutter谷歌地图中SVG标记无法显示网络图片问题求助

你的代码核心问题是：flutter_svg库无法直接解析SVG中引用的网络图片——它的SVG解析器不会主动发起网络请求获取外部资源，仅能处理本地资源或已嵌入的base64格式图片。

要解决这个问题，需要先把网络图片下载到内存并转为base64编码，再嵌入SVG中使用，具体步骤如下：

1. 添加依赖 #

确保pubspec.yaml中添加http库用于下载图片：

dependencies:
  flutter:
    sdk: flutter
  flutter_svg: ^2.0.9
  http: ^1.1.0

2. 修改代码逻辑 #

先下载网络图片转base64，再生成包含该图片的SVG字符串，最后解析为BitmapDescriptor：

import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart' show BitmapDescriptor;
import 'dart:ui' as ui;
import 'package:http/http.dart' as http;
import 'dart:convert';

Future<BitmapDescriptor> getAssetImageMarker(String networkImage) async {
  // 下载网络图片并转为base64编码
  final response = await http.get(Uri.parse(networkImage));
  if (response.statusCode != 200) {
    throw Exception('图片加载失败');
  }
  final base64Image = base64Encode(response.bodyBytes);
  // 根据图片格式调整前缀，PNG则改为image/png
  final imageDataUri = 'data:image/jpeg;base64,$base64Image';

  Size size = const Size(30, 30);
  String svgString = '''
    <svg width="100" height="100" >
      <defs>
        <pattern id="image-pattern" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse" >
          <image href="$imageDataUri" x="0" y="0" width="100" height="100" preserveAspectRatio="xMidYMid slice" />
        </pattern>
      </defs>
      <circle cx="50" cy="50" r="40" stroke="orange" stroke-width="4" fill="url(#image-pattern)" />
    </svg>
''';

  final svgDrawableRoot = await svg.fromSvgString(svgString, 'marker-debug');

  final ratio = ui.window.devicePixelRatio.ceil();
  final width = size.width.ceil() * ratio;
  final height = size.height.ceil() * ratio;
  final picture = svgDrawableRoot.toPicture(
    size: Size(
      width.toDouble(),
      height.toDouble(),
    ),
  );
  final image = await picture.toImage(width, height);
  final byteData = await image.toByteData(format: ui.ImageByteFormat.png);
  final uInt8List = byteData!.buffer.asUint8List();
  return BitmapDescriptor.fromBytes(uInt8List);
}

额外注意事项 #

• 需根据实际图片格式调整data:image/jpeg;base64,前缀，PNG图片改为data:image/png;base64,。
• 添加preserveAspectRatio="xMidYMid slice"可让图片在圆形内居中裁剪，避免拉伸变形。
• 建议添加网络请求异常处理逻辑，比如图片加载失败时返回兜底标记。

内容的提问来源于stack exchange，提问作者Joaquín Varela