如何在 flutter 应用程序中显示地图，而不是在 Web 视图中打开它

Question

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: [
                TileLayerOptions(
                  urlTemplate:
                  "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                  subdomains: ['a', 'b', 'c'],
                ),
                MarkerLayerOptions(
                  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(),
                        ),
                ],
              ),
          ),
        ],
      ),
    );
  }
}

我试图在我的 Flutter 应用程序中显示地图，但收到以下错误，我一直在尝试调试，但遇到了瓶颈。

未定义命名参数“layers”。 尝试将名称更正为现有命名参数的名称，或使用名称“layers”定义命名参数。

未为“HospitalDetails”类型定义“TileLayerOptions”方法。 尝试将名称更正为现有方法的名称，或定义名为“TileLayerOptions”的方法。

未为类型“HospitalDetails”定义方法“MarkerLayerOptions”。 尝试将名称更正为现有方法的名称，或定义名为“MarkerLayerOptions”的方法。

Answer 1

我必须将命名参数“layers[]”更改为children[]，将方法“TileLayerOptions”更改为“TileLayer”，将方法“MarkerLayerOptions”更改为“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';
import 'package:zuri_health/theming/theme.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(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Expanded(
            child: FlutterMap(
              options: MapOptions(
                center: LatLng(
                  hospital.location!.latitude!,
                  hospital.location!.longitude!,
                ),
                zoom: 13.0,
              ),
              children: [
                TileLayer(
                  urlTemplate:
                  "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                  subdomains: const ['a', 'b', 'c'],
                ),
                MarkerLayer(
                  markers: [
                    Marker(
                      width: 80.0,
                      height: 80.0,
                      point: LatLng(
                        hospital.location!.latitude!,
                        hospital.location!.longitude!,
                      ),
                      builder: (ctx) => Icon(
                        Icons.location_on,
                        color: AppTheme.red,
                        size: 40.0,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.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(),
                        ),
                ],
              ),
          ),
        ],
      ),
    );
  }
}