Flutter中如何实现常规Map View？需启动即加载可嵌入容器的地图组件

当然有啦！你完全可以把地图组件直接嵌入Container里，而且实现启动时就加载完成的需求也不难。不用局限于只能触发全屏的插件，给你推荐两个最常用的方案：

1. 官方谷歌地图插件：google_maps_flutter #

这是Google官方维护的地图插件，支持Android和iOS，能直接作为Widget嵌入任意布局（包括Container），而且可以实现启动即加载。

步骤示例： #

• 首先在pubspec.yaml中添加依赖：

dependencies:
  google_maps_flutter: ^2.5.0

• 然后在代码中直接把GoogleMap放在Container里，同时在initState中提前初始化控制器，确保启动时地图加载完成：

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

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

  @override
  State<EmbeddedMapScreen> createState() => _EmbeddedMapScreenState();
}

class _EmbeddedMapScreenState extends State<EmbeddedMapScreen> {
  late GoogleMapController _mapController;
  // 定义初始地图位置，比如北京天安门附近
  final CameraPosition _initialCameraPosition = const CameraPosition(
    target: LatLng(39.9042, 116.4074),
    zoom: 12,
  );

  @override
  void initState() {
    super.initState();
    // 这里可以提前做一些地图加载的准备工作，比如预加载地图样式、标记点等
    // 确保启动时地图能快速渲染
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('嵌入容器的地图')),
      body: Center(
        // 把地图放在Container里，自定义宽高
        child: Container(
          width: 350,
          height: 400,
          decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
          child: GoogleMap(
            initialCameraPosition: _initialCameraPosition,
            onMapCreated: (controller) {
              _mapController = controller;
              // 地图创建完成后可以做一些后续操作，比如移动视角、添加标记
            },
            // 可以根据需求开启/关闭地图交互，比如缩放、拖拽等
            zoomControlsEnabled: true,
            myLocationEnabled: true,
          ),
        ),
      ),
    );
  }
}

注意：使用这个插件需要在Android和iOS端配置谷歌地图的API密钥，按照平台要求完成基础配置即可

2. 开源Leaflet地图插件：flutter_map #

如果你不需要依赖谷歌服务，这个基于Leaflet的开源插件是很好的选择，同样支持嵌入Container，启动即加载，而且自定义性很强。

步骤示例： #

• 添加依赖到pubspec.yaml：

dependencies:
  flutter_map: ^6.1.0
  latlong2: ^0.9.0 # 用于处理经纬度

• 嵌入Container的代码示例：

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

class LeafletEmbeddedMap extends StatelessWidget {
  const LeafletEmbeddedMap({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('开源嵌入地图')),
      body: Center(
        child: Container(
          width: 350,
          height: 400,
          decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
          child: FlutterMap(
            options: MapOptions(
              initialCenter: const LatLng(39.9042, 116.4074),
              initialZoom: 12,
            ),
            children: [
              // 使用OpenStreetMap作为底图
              TileLayer(
                urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                subdomains: const ['a', 'b', 'c'],
              ),
              // 可以添加标记点、多边形等
              MarkerLayer(
                markers: [
                  Marker(
                    point: const LatLng(39.9042, 116.4074),
                    width: 80,
                    height: 80,
                    child: const Icon(Icons.location_on, color: Colors.red, size: 40),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这个插件不需要额外的API密钥，直接使用开源的地图瓦片服务，启动时会自动加载底图，完美匹配你的需求。

额外提示： #

如果想要确保启动时地图完全加载完成，可以结合FutureBuilder或者在initState中预加载地图资源，避免短暂的空白状态。比如在google_maps_flutter中，可以提前初始化地图样式或者标记点数据。

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