Flutter集成Google Map显示黑屏问题求助

1. 优先解决Google Maps API Key缺失（黑屏核心原因） #

日志明确提示API key未找到，这是地图黑屏的主要诱因，按对应平台配置：

• Android端：
  打开android/app/src/main/AndroidManifest.xml，在<application>标签内插入以下代码：

  <meta-data
      android:name="com.google.android.geo.API_KEY"
      android:value="你的Google Maps API Key"/>
  

  注意：API Key必须在Google Cloud控制台启用Google Maps Android SDK，同时配置好对应应用的包名和签名指纹。
• iOS端：
  打开ios/Runner/AppDelegate.swift，在application(_:didFinishLaunchingWithOptions:)方法中添加：

  GMSServices.provideAPIKey("你的Google Maps API Key")
  

  同时在ios/Runner/Info.plist中补充：

  <key>io.flutter.embedded_views_preview</key>
  <true/>
  

2. 消除虚拟显示尺寸警告 #

该警告为模拟器分辨率适配问题，不直接导致黑屏，可通过以下方式解决：

• 打开Android模拟器设置，将屏幕分辨率调整为对应设备的官方标准尺寸。
• 或修改android/app/src/main/res/values/styles.xml中的主题配置：

  <style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
      <item name="android:windowFullscreen">true</item>
      <item name="android:windowContentOverlay">@null</item>
  </style>
  

3. 检查地图页面代码逻辑 #

确保地图页面正确接收经纬度并初始化控制器，示例代码如下：

import 'package:google_maps_flutter/google_maps_flutter.dart';

class MapScreen extends StatefulWidget {
  final double latitude;
  final double longitude;

  const MapScreen({super.key, required this.latitude, required this.longitude});

  @override
  State<MapScreen> createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  late GoogleMapController mapController;
  late CameraPosition _initialCameraPosition;

  @override
  void initState() {
    super.initState();
    _initialCameraPosition = CameraPosition(
      target: LatLng(widget.latitude, widget.longitude),
      zoom: 14,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Location Map')),
      body: GoogleMap(
        initialCameraPosition: _initialCameraPosition,
        onMapCreated: (controller) => mapController = controller,
        markers: {
          Marker(
            markerId: const MarkerId('location'),
            position: LatLng(widget.latitude, widget.longitude),
          )
        },
      ),
    );
  }
}

排查要点：

• 确认经纬度参数已成功传递到地图页面。
• 检查pubspec.yaml中已添加google_maps_flutter依赖，且执行过flutter pub get命令。

4. 后续排查方向 #

若配置API Key后仍出现黑屏，执行flutter run -v打印详细日志，搜索GoogleMaps相关错误信息，排查是否存在API权限不足、设备/模拟器网络连接失败等问题。

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