Flutter地图正确展示3千个坐标点、解决加载慢与点位偏移问题

一、点位出现在大西洋的核心修复 #

你代码里存在两处致命逻辑错误导致坐标偏离：

1. 经纬度参数传值错误
   构造LatLng时两个参数都传入了纬度e.stLat，缺少经度参数，坐标完全不符合实际位置，自然会显示到非目标区域。正确写法需要把第二个参数替换为你Stop类里的经度字段，比如e.stLng（根据你实际定义的字段名调整）。
2. Marker尺寸设置过小
   你给Marker的width和height设置了0.2，这个单位是逻辑像素，0.2的尺寸几乎肉眼不可见，调整为30~50的合理值即可。

二、其他代码逻辑错误修正 #

1. 删除冗余循环逻辑
   你在listStops.forEach中重复生成Marker列表，每次都覆盖allMarkers且只取前3条数据，完全属于无用逻辑，直接删除外层的forEach循环，单次生成Marker列表即可。
2. 修正FutureBuilder返回逻辑
   你在判断加载状态前直接返回了地图组件，导致加载状态下的进度条永远不会被渲染，需要按加载状态分层返回对应组件。
3. 避免在build中重复处理数据
   点位的Marker生成逻辑建议放到fetchStops的异步方法中处理，不要每次触发build都重新遍历生成Marker，减少不必要的性能消耗。

三、3000个点位加载慢优化方案 #

1. 视口动态加载
   只渲染当前地图可视区域内的点位，监听地图缩放、拖动事件，动态更新显示的Marker列表，避免一次性渲染3000个组件。
2. 点位聚合渲染
   使用地图配套的Marker聚合能力，把距离相近的点位合并为聚合点显示，用户缩放地图时再展开对应区域的点位，可大幅降低渲染压力。

修正后参考代码 #

class _MapState extends State<Map> {
  @override
  void initState() {
    futureStops = fetchStops();
    super.initState();
  }

  Future<List<Stop>> futureStops;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: FutureBuilder<List<Stop>>(
        future: futureStops,
        builder: (BuildContext context, AsyncSnapshot<List<Stop>> snapshot) {
          // 加载中显示进度条
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }
          // 加载出错提示
          if (snapshot.hasError) {
            return Center(child: Text('加载失败：${snapshot.error}'));
          }
          // 加载完成渲染地图
          if (snapshot.hasData) {
            final listStops = snapshot.data!;
            // 单次生成Marker列表
            final allMarkers = listStops.map((e) => Marker(
              width: 30,
              height: 30,
              // 修正经纬度传参，第二个参数替换为你实际的经度字段
              point: latLong.LatLng(e.stLat, e.stLng),
              builder: (_) => const Icon(
                Icons.person_pin,
                color: Colors.red,
                size: 30,
              ),
            )).toList();

            return FlutterMap(
              options: MapOptions(
                center: latLong.LatLng(/* 替换为你的地图中心坐标 */),
                zoom: 13.0,
              ),
              layers: [
                TileLayerOptions(
                  urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                  subdomains: ['a', 'b', 'c']
                ),
                MarkerLayerOptions(markers: allMarkers),
              ]
            );
          }
          return const SizedBox.shrink();
        }
      ),
    );
  }
}

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