Flutter中同时展示固定充电站标记与动态车辆标记的实现问题

兄弟我太懂你这种新手卡壳的感觉了！你现在的核心问题就是不知道怎么把固定的充电站Marker和动态更新的车辆Marker合并成一个集合，同时传给GoogleMap的markers参数，对吧？别慌，这其实是个很基础的集合合并问题，我给你一步步捋清楚。

问题根源 #

你之前要么手动写死充电站的Marker集合，要么只放动态车辆的usersCarArr.values.toSet()，但GoogleMap的markers参数只接受一个Set<Marker>类型的值，所以得把这两部分合并成一个大集合才行。

解决方案步骤 #

1. 先把充电站Marker整理成统一集合

首先别再零散写了，把所有充电站的Marker放到一个单独的Set<Marker>里，同时一定要给每个Marker设置唯一的markerId（你之前都是空字符串，会导致标记互相覆盖，最后只显示一个！）：

// 把所有充电站标记统一管理
final Set<Marker> _chargingStationMarkers = {
  Marker(
    markerId: const MarkerId('station_ev01'), // 唯一ID
    icon: iconStation,
    position: ev01,
  ),
  Marker(
    markerId: const MarkerId('station_ev02'),
    icon: iconStation,
    position: ev02,
  ),
  Marker(
    markerId: const MarkerId('station_ev03'),
    icon: iconStation,
    position: ev03,
  ),
  Marker(
    markerId: const MarkerId('station_ev04'),
    icon: iconStation,
    position: ev04,
  ),
  Marker(
    markerId: const MarkerId('station_ev05'),
    icon: iconStation,
    position: ev05,
  ),
};

2. 合并两个集合传给GoogleMap

在GoogleMap的markers参数里，用Dart的**扩展运算符...**把充电站集合和动态车辆集合合并成一个新的Set：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: GoogleMap(
      style: _themeformap,
      mapType: MapType.normal,
      initialCameraPosition: _kGooglePlex,
      onMapCreated: (GoogleMapController controller) {
        _controller.complete(controller);
      },
      // 关键：合并充电站标记和动态车辆标记
      markers: {..._chargingStationMarkers, ...usersCarArr.values.toSet()},
    ),
  );
}

为什么这样可行？ #

• 扩展运算符...可以把一个集合里的所有元素“展开”到另一个集合里，相当于把两个Set的内容合并成了一个新的Set。
• 当你调用updateOtherCarLocation更新车辆位置并触发setState时，GoogleMap会自动重新渲染合并后的标记集合，既保留所有固定充电站，又显示最新的车辆位置。

额外注意事项 #

1. MarkerId必须唯一：充电站的markerId要和车辆的markerId（用uuid生成的）完全不重复，不然会出现标记被覆盖的问题。
2. 如果你以后要加更多充电站，直接往_chargingStationMarkers里加就行，不用再改GoogleMap的代码，维护起来更方便。

内容来源于stack exchange