Flutter实现：在Google Map上展示多用户经纬度标记

1. 确保用户数据模型正确解析JSON #

先确认你的用户模型能正确处理lat和lng字段，示例代码如下：

class User {
  final String id;
  final String name;
  final double lat;
  final double lng;

  User({required this.id, required this.name, required this.lat, required this.lng});

  // 从JSON解析单条用户数据
  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'],
      name: json['name'],
      lat: double.parse(json['lat'].toString()), // 兼容字符串类型的坐标值
      lng: double.parse(json['lng'].toString()),
    );
  }

  // 批量解析JSON数组为用户列表
  static List<User> fromJsonList(List<dynamic> jsonList) {
    return jsonList.map((json) => User.fromJson(json)).toList();
  }
}

2. 在ChangeNotifier中管理用户数据获取逻辑 #

修改你的状态管理类，确保成功拉取并存储用户位置数据，同时通知UI更新：

class UserLocationProvider extends ChangeNotifier {
  List<User> _users = [];
  bool _isLoading = false;

  List<User> get users => _users;
  bool get isLoading => _isLoading;

  Future<void> fetchUsers() async {
    _isLoading = true;
    notifyListeners();
    try {
      final response = await http.get(Uri.parse('你的用户API接口地址'));
      if (response.statusCode == 200) {
        final List<dynamic> jsonData = json.decode(response.body);
        _users = User.fromJsonList(jsonData);
      } else {
        _users = [];
      }
    } catch (e) {
      _users = [];
    }
    _isLoading = false;
    notifyListeners();
  }
}

3. 在LocationPage渲染地图与标记 #

使用GoogleMap组件，将用户列表转换为标记集合展示：

class LocationPage extends StatefulWidget {
  const LocationPage({super.key});

  @override
  State<LocationPage> createState() => _LocationPageState();
}

class _LocationPageState extends State<LocationPage> {
  final Completer<GoogleMapController> _controller = Completer();

  // 初始相机位置（可替换为目标区域默认坐标）
  static const CameraPosition _kInitialPosition = CameraPosition(
    target: LatLng(37.7749, -122.4194),
    zoom: 10,
  );

  @override
  void initState() {
    super.initState();
    // 页面加载时触发用户数据获取
    Provider.of<UserLocationProvider>(context, listen: false).fetchUsers();
  }

  @override
  Widget build(BuildContext context) {
    final userProvider = Provider.of<UserLocationProvider>(context);
    return Scaffold(
      appBar: AppBar(title: const Text('用户位置地图')),
      body: userProvider.isLoading
          ? const Center(child: CircularProgressIndicator())
          : GoogleMap(
              mapType: MapType.normal,
              initialCameraPosition: _kInitialPosition,
              onMapCreated: (GoogleMapController controller) {
                _controller.complete(controller);
              },
              markers: Set<Marker>.from(
                userProvider.users.map((user) => Marker(
                  markerId: MarkerId(user.id), // 用用户ID确保标记唯一
                  position: LatLng(user.lat, user.lng),
                  infoWindow: InfoWindow(title: user.name),
                )),
              ),
            ),
    );
  }
}

关键注意事项 #

• 确认API返回的JSON中，lat和lng字段可转换为double类型，若接口返回字符串，必须用double.parse处理
• 标记的markerId必须唯一，使用用户ID是最优选择
• 在pubspec.yaml中添加依赖：google_maps_flutter、provider、http
• 完成Android和iOS端的Google Maps API密钥配置，否则地图无法加载

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