Flutter Web集成Google Maps本地正常，部署Firebase后失效求助

针对你遇到的本地正常、部署Firebase后地图失效的问题，以下是几个关键排查和修复方向：

1. 检查Google Maps API密钥的域名限制 #

本地开发时localhost通常被允许，但部署到Firebase后，需要将Firebase的域名添加到API密钥的HTTP引用白名单：

• 登录Google Cloud控制台，找到对应的API密钥
• 进入密钥编辑页面，选择「HTTP引用限制」
• 添加Firebase默认域名：*.web.app/*、*.firebaseapp.com/*，如果用了自定义域名，也要添加对应的规则（比如*.yourdomain.com/*）
• 保存配置后，重新部署Firebase Hosting

2. 处理Firebase Hosting的缓存问题 #

浏览器可能缓存了旧的资源导致地图脚本未正确加载：

• 修改firebase.json中的缓存规则，对index.html设置不缓存：

  "hosting": {
    "public": "build/web",
    "headers": [
      {
        "source": "/index.html",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          }
        ]
      }
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
  

• 部署时使用firebase deploy --only hosting，或者在浏览器中强制刷新（Ctrl+F5）清除缓存

3. 优化index.html中的地图脚本配置 #

确保地图脚本在Flutter初始化前正确加载：

• 将谷歌地图脚本放在<body>标签的末尾、<script src="main.dart.js"></script>之前
• 移除不必要的callback=Function.prototype，改为让Flutter插件处理初始化，示例：

  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
  <script src="main.dart.js" type="application/javascript"></script>
  

• 如果需要使用特定地图功能（如地点搜索），可以添加对应的库参数：&libraries=places

4. 验证插件版本兼容性 #

检查pubspec.yaml中google_maps_flutter和google_maps_flutter_web的版本是否匹配，建议使用最新稳定版：

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.5.0
  google_maps_flutter_web: ^0.5.1

执行flutter pub get更新依赖后重新构建部署

5. 确认Firebase Hosting的重写规则 #

Flutter Web是单页应用，必须配置正确的重写规则确保路由正常：
在firebase.json中确保包含：

"rewrites": [
  {
    "source": "**",
    "destination": "/index.html"
  }
]

内容的提问来源于stack exchange，提问作者Mohammed Al-Salboukh