Flutter Web中如何自定义Google Map标记？

你的代码直接使用了Google Maps JS API的Dart封装包，和移动端google_maps_flutter的API逻辑不同，无法使用BitmapDescriptor.fromAssetImage，需要采用Web端对应的方式设置标记：

1. 修改默认标记的颜色 #

通过Symbol对象自定义标记样式，利用内置SVG路径或自定义路径设置颜色、描边等属性：

Marker(MarkerOptions()
  ..position = myLatlng
  ..map = map
  ..title = 'Title'
  ..icon = Symbol()
    // 使用Google Maps内置的标记路径
    ..path = "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"
    ..fillColor = '#FF6B6B' // 填充色
    ..fillOpacity = 1
    ..strokeColor = '#333333' // 描边色
    ..strokeWeight = 2 // 描边宽度
    ..scale = 4 // 缩放大小
);

如果需要圆形、方形等简单形状，也可以直接使用SymbolPath内置常量，比如SymbolPath.CIRCLE。

2. 使用自定义PNG图片作为标记 #

步骤1：配置资源文件 #

先在pubspec.yaml中添加PNG图片的路径：

flutter:
  assets:
    - assets/images/custom_marker.png

步骤2：在代码中设置标记图标 #

通过Icon对象指定图片路径和显示尺寸：

Marker(MarkerOptions()
  ..position = myLatlng
  ..map = map
  ..title = 'Title'
  ..icon = Icon()
    ..url = 'assets/images/custom_marker.png' // 本地资源路径
    ..scaledSize = Size(40, 50) // 自定义标记的宽高
);

如果使用网络图片，直接将url替换为完整的网络地址即可：

..url = 'https://example.com/your-marker.png'

完整修改后的示例代码 #

import 'dart:html';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:google_maps/google_maps.dart';

class GoogleMap extends StatelessWidget {
  const GoogleMap({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return getMap();
  }
}

Widget getMap() {
  String htmlId = "mapId";

  ui.platformViewRegistry.registerViewFactory(htmlId, (int viewId) {
    final myLatlng = LatLng(48.396917803869584, 9.991867526841805);

    final mapOptions = MapOptions()
      ..zoom = 13
      ..center = LatLng(48.39782242083419, 9.987785692832691);

    final elem = DivElement()
      ..id = htmlId
      ..style.width = "100%"
      ..style.height = "100%"
      ..style.border = 'none';

    final map = GMap(elem, mapOptions);

    // 自定义颜色标记示例
    Marker(MarkerOptions()
      ..position = myLatlng
      ..map = map
      ..title = '自定义颜色标记'
      ..icon = Symbol()
        ..path = "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"
        ..fillColor = '#FF6B6B'
        ..fillOpacity = 1
        ..strokeColor = '#333333'
        ..strokeWeight = 2
        ..scale = 4
    );

    // 自定义PNG标记示例（需先配置assets）
    // Marker(MarkerOptions()
    //   ..position = LatLng(48.398, 9.988)
    //   ..map = map
    //   ..title = '自定义PNG标记'
    //   ..icon = Icon()
    //     ..url = 'assets/images/custom_marker.png'
    //     ..scaledSize = Size(40, 50)
    // );

    return elem;
  });

  return HtmlElementView(viewType: htmlId);
}

内容的提问来源于stack exchange，提问作者JAgüero