Flutter 如何实现用户点击(onTap)marker时更改其颜色

以下方案基于Flutter主流地图插件google_maps_flutter编写，其他地图SDK（高德、百度地图Flutter版）逻辑通用： #

核心思路 #

Marker实例本身是不可变类型，无法直接修改属性值，因此需要在State中维护Marker集合的状态，点击Marker时通过创建新的Marker副本替换原有实例，再调用setState触发重绘即可完成颜色修改。

具体实现步骤 #

• 第一步：定义状态变量
  在页面State类中维护Marker集合和当前选中的MarkerID：

// 存储地图上所有标记
Set<Marker> _markers = {};
// 记录当前被选中的标记ID，用于恢复之前选中标记的颜色
MarkerId? _selectedMarkerId;

• 第二步：初始化Marker并绑定点击回调
  初始化Marker时给每个实例配置onTap回调，传入当前Marker的唯一ID：

@override
void initState() {
  super.initState();
  _initMarkers();
}
void _initMarkers() {
  const marker1Id = MarkerId('location_1');
  const marker2Id = MarkerId('location_2');
  _markers.addAll([
    Marker(
      markerId: marker1Id,
      position: const LatLng(39.9042, 116.4074), // 北京坐标示例
      // 默认使用红色Marker
      icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueRed),
      onTap: () => _onMarkerTapped(marker1Id),
    ),
    Marker(
      markerId: marker2Id,
      position: const LatLng(31.2304, 121.4737), // 上海坐标示例
      icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueRed),
      onTap: () => _onMarkerTapped(marker2Id),
    ),
  ]);
}

• 第三步：实现点击修改颜色的逻辑

void _onMarkerTapped(MarkerId tappedId) {
  // 先将之前选中的Marker恢复为默认红色
  if (_selectedMarkerId != null) {
    final oldMarker = _markers.firstWhere((m) => m.markerId == _selectedMarkerId);
    final resetOldMarker = oldMarker.copyWith(
      iconParam: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueRed),
    );
    _markers.remove(oldMarker);
    _markers.add(resetOldMarker);
  }
  // 将当前点击的Marker修改为蓝色（可自定义其他颜色值）
  final currentMarker = _markers.firstWhere((m) => m.markerId == tappedId);
  final newMarker = currentMarker.copyWith(
    iconParam: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueBlue),
  );
  _markers.remove(currentMarker);
  _markers.add(newMarker);
  // 更新选中ID，触发重绘
  _selectedMarkerId = tappedId;
  setState(() {});
}

• 第四步：将Marker集合传入地图组件

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: GoogleMap(
      initialCameraPosition: const CameraPosition(
        target: LatLng(39.9042, 116.4074),
        zoom: 10,
      ),
      markers: _markers,
    ),
  );
}

补充说明 #

如果使用自定义Marker图标，只需将BitmapDescriptor.defaultMarkerWithHue替换为对应颜色的自定义图标资源即可，逻辑无需修改。 #

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