google_maps_flutter_web Polyline表现与移动端不一致问题咨询

问题原因 #

你遇到的是google_maps_flutter_web 0.3.x版本的已知缺陷，该版本对Polyline坐标的序列化逻辑存在错误，才会导致移动端正常显示的路线在Web端渲染为正北方向的直线。

解决方案 #

按优先级可选择以下操作：

1. 升级依赖版本（最彻底方案）
   将谷歌地图相关依赖升级到修复后的版本：

google_maps_flutter: ^2.2.0
google_maps_flutter_web: ^0.4.0

该版本官方已经修复了Web端Polyline坐标映射的异常问题。升级后执行flutter clean清除缓存后重新编译即可。

2. 临时兼容方案（暂时无法升级依赖时使用）
   在生成Polyline对象时，新增geodesic: true属性，强制路径走大地线计算逻辑，即可规避旧版本的渲染缺陷：

final Polyline routePolyline = Polyline(
  polylineId: const PolylineId("custom_route"),
  points: routePointList, // 确认每个LatLng参数顺序为(纬度, 经度)，不要写反
  color: Colors.blueAccent,
  width: 6,
  geodesic: true, // 新增该行即可
);

3. 额外校验项
   确认所有传入Polyline的LatLng参数顺序为(纬度, 经度)，Web端对参数顺序的容错率远低于移动端，顺序颠倒也会导致路线渲染异常。

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