Flutter Google Map实现marker分页加载的技术问题咨询

一、Firebase端数据结构改造 #

首先需要对存储marker的Firestore文档新增字段，适配地理范围查询：

• 每个marker文档保留latitude、longitude两个单独的数值字段，存储经纬度
• 新增geohash字符串字段，存储对应经纬度的地理哈希值（可使用Dart的geohash库生成）

二、Flutter端核心实现逻辑 #

1. 地图初始化与事件监听 #

• 启动后先申请定位权限，获取用户当前位置，初始化地图时将相机视角定位到用户位置
• 给GoogleMap组件绑定onCameraIdle回调，禁止使用onCameraMove触发查询，避免滑动过程中频繁发起请求
• 本地维护两个全局缓存变量：
  • Set<String> loadedMarkerIds：存储已经加载过的marker ID，避免重复渲染
  • LatLngBounds? lastQueriedBounds：存储上一次查询的可视区域，避免相同区域重复请求

2. 可视区域Marker查询逻辑 #

每次onCameraIdle触发时按以下步骤执行：

1. 调用mapController.getVisibleRegion()获取当前地图的可视区域边界currentBounds，判断和上一次查询的边界重合度如果超过90%，直接跳过请求
2. 根据当前地图的缩放等级zoomLevel确定geohash前缀长度：
   • 缩放等级≥15：用6位geohash前缀（精度≈±0.61km）
   • 缩放等级10~14：用5位geohash前缀（精度≈±2.4km）
   • 缩放等级<10：用4位geohash前缀（精度≈±20km）
3. 生成当前可视区域对应的9个geohash前缀：包含当前中心点的前缀，以及周围8个相邻格点的同长度前缀，解决geohash边缘漏点问题
4. 构造Firestore复合查询：

   Query markerQuery = FirebaseFirestore.instance.collection('markers')
     .where('geohash', whereIn: geohashPrefixList)
     .where('latitude', isGreaterThanOrEqualTo: currentBounds.southwest.latitude)
     .where('latitude', isLessThanOrEqualTo: currentBounds.northeast.latitude)
     .where('longitude', isGreaterThanOrEqualTo: currentBounds.southwest.longitude)
     .where('longitude', isLessThanOrEqualTo: currentBounds.northeast.longitude);
   

   如果可视区域跨越180度经度线，需要拆分东西两个区域分别查询后合并结果
5. 拿到查询返回的文档列表后，遍历和loadedMarkerIds比对，只新增不存在的marker到地图的marker集合中，更新loadedMarkerIds和lastQueriedBounds

3. 性能优化点 #

• 加请求防抖：onCameraIdle触发后延迟500ms再发起请求，如果500ms内再次触发onCameraIdle则取消上一次的待执行请求，减少无效请求
• 控制单次查询数量：给Firestore查询加limit(200)限制，避免一次性加载过多marker导致地图卡顿，缩放等级较低时可进一步调低limit阈值
• Marker增量更新：不要每次查询后全量替换地图的marker集合，仅插入新增的marker，可定期清理超出可视区域过远的低优先级marker
• 内存缓存：已加载的marker数据可存在本地内存，用户滑回已加载过的区域时直接从缓存读取，不需要再请求Firebase

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