Flutter显示地图Polygon报错type 'string' is not a subtype of List<LatLng>如何解决
报错原因
type 'string' is not a subtype of the 'List<LatLng>'报错的核心原因是你传入Polygon组件points参数的map变量实际为String类型,不匹配参数要求的List<LatLng>类型。你提到的“数据已完成解码”仅完成了JSON字符串的基础解析,还没有将坐标值映射为框架要求的LatLng对象列表。
解决步骤
- 首先确认接口返回的
map字段的字符串格式,常规场景下多边形坐标会存储为"[[纬度1,经度1],[纬度2,经度2],...]"的JSON字符串格式。 - 将坐标字符串转换为数组,再遍历数组中的每一组坐标,逐个生成LatLng实例,最终拼接为
List<LatLng>类型的列表传入Polygon组件。
修正后代码示例
坐标转换逻辑:
// 引入json解析依赖 import 'dart:convert'; // 引入地图依赖(以google_maps_flutter为例,根据你使用的地图库调整) import 'package:google_maps_flutter/google_maps_flutter.dart'; // 坐标转换逻辑 String mapRaw = widget.list[widget.index]['map']; // 若你已经完成过JSON解码,拿到的是List类型可跳过jsonDecode步骤 List<dynamic> coordArray = jsonDecode(mapRaw); // 遍历转换为LatLng列表 List<LatLng> polygonPoints = coordArray.map((item) => LatLng(item[0], item[1])).toList();
多边形生成方法:
Set<Polygon> myPolygon() { Set<Polygon> polygonSet = {}; polygonSet.add(Polygon( polygonId: const PolygonId('test'), points: polygonPoints, strokeWidth: 2, strokeColor: Colors.blue, fillColor: Colors.blue.withOpacity(0.4), )); return polygonSet; }
注意事项
- 如果渲染出的多边形位置和预期不符,大概率是坐标顺序颠倒,将
LatLng(item[0], item[1])调整为LatLng(item[1], item[0])即可。 - 确保坐标数组不为空、每组坐标的数值合法,避免出现越界或类型转换异常。
内容的提问来源于stack exchange,提问作者dinesh balan
相关产品推荐
相关产品推荐

