google_maps_flutter中如何修改点击Marker的icon尺寸？

目前google_maps_flutter包的Marker是不可变对象，没有直接修改已有Marker属性的API，但你不需要用“新增Marker覆盖”的方案——正确的做法是通过更新Marker集合来替换被点击的Marker，只修改它的icon尺寸，其他属性保持不变。

具体实现步骤： #

• 提前准备两种尺寸的Marker图标（正常/选中状态）
• 维护一个可更新的Marker集合，配合setState或状态管理工具实现动态更新
• 在Marker的onTap回调中，替换目标Marker的icon并更新集合

代码示例： #

首先初始化不同尺寸的图标：

late BitmapDescriptor normalMarkerIcon;
late BitmapDescriptor selectedMarkerIcon;

@override
void initState() {
  super.initState();
  _initMarkerIcons();
  _initMarkers();
}

void _initMarkerIcons() async {
  // 生成正常尺寸的图标
  normalMarkerIcon = await BitmapDescriptor.fromAssetImage(
    const ImageConfiguration(size: Size(40, 40)),
    'assets/marker_icon.png',
  );
  // 生成点击后放大的图标
  selectedMarkerIcon = await BitmapDescriptor.fromAssetImage(
    const ImageConfiguration(size: Size(60, 60)),
    'assets/marker_icon.png',
  );
}

然后维护Marker集合和选中状态：

Set<Marker> _markers = {};
String? _selectedMarkerId;

void _initMarkers() {
  // 初始化多个Marker，默认使用正常尺寸图标
  final List<Marker> markerList = [
    Marker(
      markerId: const MarkerId('marker_1'),
      position: const LatLng(31.2304, 121.4737),
      icon: normalMarkerIcon,
      onTap: () => _handleMarkerTap('marker_1'),
    ),
    Marker(
      markerId: const MarkerId('marker_2'),
      position: const LatLng(31.2001, 121.5654),
      icon: normalMarkerIcon,
      onTap: () => _handleMarkerTap('marker_2'),
    ),
  ];
  _markers = Set.from(markerList);
}

void _handleMarkerTap(String markerId) {
  setState(() {
    // 恢复之前选中的Marker为正常尺寸
    if (_selectedMarkerId != null) {
      final oldSelectedMarker = _markers.firstWhere((m) => m.markerId.value == _selectedMarkerId);
      _markers.remove(oldSelectedMarker);
      _markers.add(oldSelectedMarker.copyWith(iconParam: normalMarkerIcon));
    }

    // 更新当前点击的Marker为放大尺寸
    final tappedMarker = _markers.firstWhere((m) => m.markerId.value == markerId);
    _markers.remove(tappedMarker);
    _markers.add(tappedMarker.copyWith(iconParam: selectedMarkerIcon));

    _selectedMarkerId = markerId;
  });
}

最后在GoogleMap组件中使用：

@override
Widget build(BuildContext context) {
  return GoogleMap(
    initialCameraPosition: const CameraPosition(
      target: LatLng(31.2304, 121.4737),
      zoom: 12,
    ),
    markers: _markers,
  );
}

为什么这个方案可行？ #

google_maps_flutter会监听Marker集合的变化，当你替换集合中的某个Marker时，地图会自动更新该Marker的显示，不会产生叠加问题，性能也优于新增Marker覆盖的方案。

内容的提问来源于stack exchange，提问作者sub