Flutter Web集成Google Maps：部署报错TargetPlatform.macOS不支持求助

针对你遇到的Flutter Web部署后Google Maps组件报错TargetPlatform.macOS is not yet supported by the Maps Plugin的问题，可按以下步骤解决：

1. 升级依赖包版本 #

你当前使用的依赖版本存在平台识别的兼容性问题，更新pubspec.yaml中的依赖到最新兼容版本：

google_maps_flutter: ^2.6.0
google_maps_flutter_web: ^0.5.0+1

执行flutter pub get完成依赖更新。

2. 修正Web端地图脚本配置 #

修改web/index.html中的谷歌地图JS脚本，补充必要参数并优化加载逻辑：

<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=maps,geometry&v=weekly" async defer></script>

• libraries=maps,geometry：确保加载地图核心功能库与几何计算库，避免功能缺失
• async defer：避免脚本阻塞页面初始化
• v=weekly：使用谷歌地图JS的每周更新版本，获取最新bug修复

3. 手动注册Web端地图插件 #

在main.dart中导入Web插件并手动注册，确保Web环境下组件正确初始化：

import 'package:google_maps_flutter_web/google_maps_flutter_web.dart';

void main() {
  GoogleMapsFlutterWeb.registerWith();
  runApp(const MyApp());
}

4. 部署前验证与部署 #

• 先通过flutter run -d chrome在Chrome浏览器中测试，确认地图可正常加载、交互
• 执行flutter build web生成生产环境代码
• 将生成的build/web文件夹部署到服务器，确保服务器支持静态文件访问

关键检查项 #

• 确认你的Google Cloud API密钥已启用Maps JavaScript API，并添加了部署环境的域名到API密钥的允许列表
• 若仍报错，查看浏览器控制台的详细报错信息，通常会明确提示API权限、脚本加载失败等具体原因

• Flutter官方google_maps_flutter插件文档：直接查看Flutter官网对应插件页面，内容为实时更新的官方指南
• google_maps_flutter_web的pub.dev页面：查看版本更新日志与Web端专属配置说明

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