Flutter应用内嵌地图报错求助：layers及LayerOptions相关问题

你的问题源于使用了flutter_map旧版API，该包在v4.0+版本对核心API做了重大调整，以下是具体修复方案：

错误原因及对应修复： #

1. 命名参数'layers'未定义：新版本FlutterMap不再使用layers参数，改用children属性传入图层组件
2. TileLayerOptions/MarkerLayerOptions未定义：这两个配置类已被移除，替换为TileLayer和MarkerLayer直接作为组件使用

修正后的完整代码： #

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';

import 'package:zuri_health/models/hospital/hospital.dart';

class HospitalDetails extends StatelessWidget {
  final Hospital hospital;

  const HospitalDetails({
    Key? key,
    required this.hospital
  }): super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(hospital.name ?? 'Hospital Details'),
      ),
      body: Column(
        children: [
          Expanded(
            child: FlutterMap(
              options: MapOptions(
                center: LatLng(
                  hospital.location!.latitude!, hospital.location!.longitude!),
                zoom: 13.0,
              ),
              // 替换layers参数为children属性
              children: [
                // 替换TileLayerOptions为TileLayer组件
                TileLayer(
                  urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                  subdomains: const ['a', 'b', 'c'],
                ),
                // 替换MarkerLayerOptions为MarkerLayer组件
                MarkerLayer(
                  markers: [
                    Marker(
                      width: 80.0,
                      height: 80.0,
                      point: LatLng(hospital.location!.latitude!,
                        hospital.location!.longitude!),
                      builder: (ctx) => const Icon(
                        Icons.location_on,
                        color: Colors.red,
                      ),
                    ),
                  ],
                ),
              ],
            )),
          Padding(
            padding: const EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text(
                      'Address:',
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                    Text(hospital.address ?? 'Unknown Address'),
                    const SizedBox(height: 16.0),
                      const Text(
                          'Services:',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: hospital.services!.map<Widget>((service) {
                            return Text(service.name ?? '');
                          }).toList(),
                        ),
                ],
              ),
          ),
        ],
      ),
    );
  }
}

额外提醒： #

确保pubspec.yaml中依赖的flutter_map版本为最新稳定版，示例配置：

dependencies:
  flutter_map: ^4.0.0
  latlong2: ^0.9.0

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