Flutter Google Maps如何通过JSON API返回的列表数据显示全部标记点

问题排查与修复方案 #

1. 核心错误：JSON数据未转换为UnitModel实例 #

你代码中接口请求成功后直接将List<dynamic>类型的data赋值给List<UnitModel>类型的listLatLngUnit，没有做模型转换，类型不匹配会导致后续生成Marker的逻辑无法正常执行。
修复方式：先给UnitModel补充fromJson序列化方法，再遍历接口返回的data列表完成模型转换：

// 给你的UnitModel类补全fromJson方法，示例如下：
class UnitModel {
  final double unitLat;
  final double unitLong;
  // 其余字段根据你的实际需求补充
  UnitModel({required this.unitLat, required this.unitLong});

  factory UnitModel.fromJson(Map<String, dynamic> json) {
    return UnitModel(
      // 增加类型转换逻辑，避免后台返回字符串格式数字导致报错
      unitLat: double.parse(json['unitLat'].toString()),
      unitLong: double.parse(json['unitLong'].toString()),
      // 其余字段赋值
    );
  }
}

修改接口请求方法的赋值逻辑：

Future<List<UnitModel>> getUnit() async {
    var url = 'myprivateurl';
    var response = await http
        .get(Uri.parse('$url/unit'), headers: {'api-key': 'privateapi'});
    if (response.statusCode == 200) {
      Map<String, dynamic> jsonData = json.decode(response.body);
      List<dynamic> data = jsonData["data"];
      // 完成模型转换后再赋值
      List<UnitModel> convertedList = data.map((item) => UnitModel.fromJson(item)).toList();
      setState(() {
        listLatLngUnit = convertedList;
      });
      return listLatLngUnit;
    }
    print(listLatLngUnit);
    // 非200状态返回空列表避免Future报错
    return [];
  }

2. 确认接口方法已被正确调用 #

需要在页面初始化的initState生命周期中调用该异步方法，否则接口不会主动请求，数据会一直为空：

@override
void initState() {
  super.initState();
  getUnit();
}

3. 其余常见问题排查 #

• 检查MarkerId唯一性：如果多个点位的unitLat数值相同，会导致MarkerId重复，后续标记会覆盖之前的标记，建议用点位的唯一业务ID作为MarkerId
• 检查经纬度范围：确认接口返回的经纬度在当前地图初始的可视区域内，如果坐标偏差过远，需要缩放或拖动地图到对应区域才能看到标记
• 检查基础地图配置：确认Android、iOS端的Google Maps API密钥已正确配置，定位权限已申请，基础地图可以正常加载

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