颤动的谷歌地图没有出现

Posted 2023-02-18

【中文标题】颤动的谷歌地图没有出现

【英文标题】：Google map in flutter doesn't appear

【发布时间】：2019-08-21 04:52:00

【问题描述】：

我正在尝试按照本教程“https://medium.com/flutter-io/google-maps-and-flutter-cfb330f9a245”在颤振中添加谷歌地图。 我用谷歌地图键更新了 android 清单并添加了访问fine_location 的权限。我在没有地图的模拟器上得到白屏。 我花了很多时间试图修复它但徒劳无功。我还尝试了插件“https://pub.dartlang.org/packages/google_maps_flutter#-readme-tab-”的示例用法，但在显示地图方面没有任何帮助。提前感谢任何帮助

【问题讨论】：

I get white screen on my emulator with no map -- 是只在整个屏幕上映射还是您的应用程序崩溃了？而且您必须在使用 Google Maps API 之前添加付款选项，每天只有 1 个请求是免费的。

我有两个浮动按钮。它们出现了，但只有带有谷歌地图的部分没有显示任何东西。

最好贴代码，或者一些堆栈跟踪。

我没有写代码，因为它与本教程相同“medium.com/flutter-io/google-maps-and-flutter-cfb330f9a245”

请出示您的代码，您在编码时一定有一些错误。再次检查您的 API 密钥，检查您的模拟器是否有互联网连接。

【参考方案1】：

可能您没有在 Google Cloud Console 中启用适用于 Android 和 ios 的 Google Map 服务和 Map SDK... 试试这个链接https://console.cloud.google.com/google/maps-apis/overview

【讨论】：

我已经取消了对 api 密钥的所有限制。仍然会发生这种情况。会是什么？

然后检查android和ios的权限。对于 android，您必须授予对 AndroidManifest.xml 文件的访问权限，对于 ios，将权限放入 Info.plist 文件中

【参考方案2】：

当你在AndroidManifest.xml 文件中添加它的 API 密钥时

添加

<meta-data android:name="com.google.android.geo.API_KEY" android:value="YOUR_API_KEY"/>

介于</activity> 和</application> 之间。

在终端中运行命令flutter clean。 运行它。

【讨论】：

即使我的 API 已启用，我也遇到了同样的问题，我得到一个空白的蓝屏。 flutter clean 命令确实节省了一天：D

为我节省了一天的完美解决方案。

【参考方案3】：

创建 API 后，您应该为您的项目启用 Android SDK 和 IOS SDK。完成后，转到 API 限制并选择这两个。请看以下图片：

启用 SDK：

将它们添加到 API 限制中

你就完成了！您现在需要做的就是复制 API 密钥并将其添加到您的 AndroidManifest 文件中。另请记住，您实际上并不需要为此添加结算帐户。 希望这对你有用！

【讨论】：

你的第二张和第三张图片有什么区别？

完成，额外的颤振清洁，节省了我的一天

很高兴我能帮上忙 :)

解除所有限制，api键可以任意调用会怎样？

这就是解决的问题。我想问题是当我们只限制到 android 应用程序时，它会导致冲突。因此，不要设置任何限制并限制您的 sha-1，您将是安全的。谢谢

【参考方案4】：

在模拟器中打开您的

谷歌地图

。

如果该谷歌地图未显示地图，则问题出在您的模拟器谷歌地图中

。

您必须在模拟器中更新或重新安装谷歌地图

。 这对我有用。

【参考方案5】：

在总结中尝试了以上所有内容后：

在 Cloud Console 上启用 Android 和 iOS SDK 为 Android 清单添加了密钥 为 iOs Runner 添加了密钥 在我的应用上添加地图 运行命令 Flutter clean

地图仍显示为灰色。我的解决方案 从您的设备（手机或模拟器）上卸载应用程序，然后重新编译。 新安装正确显示地图

【参考方案6】：

转到谷歌云控制台并将您的 APIKey 切换为启用，它会工作， 我遇到了同样的问题和应用程序（我安装在一个 android 物理设备上但它没有工作，并且显示为一个空白页面，左下角有谷歌的标志，

之后我意识到我应该启用 APIKey 而不是 jsut 生成它并将其包含在我的应用程序中，当我这样做时，应用程序运行良好，地图出现并且问题得到解决

【参考方案7】：

找了一天解决办法，发现我加错了api key。 所以在构建 apk 之前仔细检查你的 api 密钥；

我已经在 ios 中添加了我的 android api 密钥。

【讨论】：

对于ios，有单独的sdk，为ios启用api

【参考方案8】：

实际上，我在上述教程中搜索问题并没有找到任何答案。我找到了另一种地图方式，它适用于我的，所以我会发布它，因为它可能对其他人有帮助。 您需要 1- 在 pubspec.yaml 中添加它以获取插件。 2-为安卓和IOS添加密钥 3- 在 main 中添加此代码。

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget 
  @override
  _MyAppState createState() => _MyAppState();


class _MyAppState extends State<MyApp> 
  GoogleMapController myMapController;
  final Set<Marker> _markers = new Set();
  static const LatLng _mainLocation = const LatLng(25.69893, 32.6421);
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text('Maps With Marker'),
              backgroundColor: Colors.blue[900],
            ),
            body: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Expanded(
                  child: GoogleMap(
                    initialCameraPosition: CameraPosition(
                      target: _mainLocation,
                      zoom: 10.0,
                    ),
                    markers: this.myMarker(),
                    mapType: MapType.normal,
                    onMapCreated: (controller) 
                      setState(() 
                        myMapController = controller;
                      );
                    ,
                  ),
                ),
              ],
            )));
  

  Set<Marker> myMarker() 
    setState(() 
      _markers.add(Marker(
        // This marker id can be anything that uniquely identifies each marker.
        markerId: MarkerId(_mainLocation.toString()),
        position: _mainLocation,
        infoWindow: InfoWindow(
          title: 'Historical City',
          snippet: '5 Star Rating',
        ),
        icon: BitmapDescriptor.defaultMarker,
      ));
    );

    return _markers;
  

【讨论】：

我试过上面的代码（按照设置和安装说明）。但是地图没有显示。我得到一个灰色的屏幕，屏幕中间有一个标记。我还在pub.dev/packages/google_maps_flutter#-installing-tab- 尝试了示例，结果相同。控制台没有错误。

@SGoldwin，你能告诉我你的模拟器是否支持谷歌游戏商店吗？

我正在使用支持 Google Play 的 Nexus 5X API 28。我安装了支持 Google Play 的 Pixel 2 API 28。在 Pixel 2 上运行时，我收到一条错误消息：“/GooglePlayServicesUtil(4151): Google Play services out of date. Requires 13400000 but found 13280022”。然后我安装了 Pixel 2 API Q（最新版本），但这次我无法在模拟器中运行该应用程序。消息：“连接到服务协议时出错：HttpException：在收到完整标头之前连接已关闭”。我用谷歌搜索，有人说你应该降级。没试过。

@SGoldwin 我也有 Nexus 5X API 28，它对我有用。实际上我对模拟器问题了解不多:(

【参考方案9】：

当我遇到这个问题时有两个可能的问题。

确保您已在您的 api 控制台“https://console.cloud.google.com/google/maps-apis/......”中启用“Maps SDK for iOS”

【讨论】：

您不应发布链接作为答案。您能否更新您的答案并提供解决问题的步骤。

【参考方案10】：

在我的调试手机上遇到了同样的问题。事实证明将其连接到 Internet 会有所帮助；）（没有注意到 Wi-Fi 已关闭）

【讨论】：

哈哈！！！对无用的评论感到抱歉，但我忍不住笑了。当然，这种我没有注意到的事情发生的频率比人们想象的要多……

Juuuuust 也发生在我身上！非常感谢您提到这个明显的要求 :D:D:D

【参考方案11】：

我也遇到了这个问题，没有为 Android 显示谷歌地图。我的 API 密钥位于 Activity 标记之间。

带有您的 API 密钥 的元数据标签需要是应用程序标签的子标签。把它放在结束 Application 标记之前。

在再次运行您的应用之前，不要忘记运行 Flutter clean。

【参考方案12】：

尝试在任何移动设备而不是模拟器上运行应用。我遇到了同样的问题，但是当我尝试在移动设备中运行应用程序时它对我有用。否则，您应该在 GCP 控制台中检查您是否为 IOS 启用了地图 SDK。

【参考方案13】：

我也遇到了这个错误或空白屏幕。所以，我得到的解决方案是启用适用于 Android 或 IOS 的 Maps SDK。在 Google Cloud Platform 上。启用 SDK 后，您的应用肯定会在一分钟内显示地图。

【参考方案14】：

Flutter 1.7.5+，Dart 2.8.5+

我已经尝试了一切，但仍然无法在 iOS 上工作，我检查了权限等一切都很好，但显然这个问题与 webview“io.flutter.embedded_views_preview”有关。设置此 info.plist 文件后，工作正常。

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

【参考方案15】：

我按照颤振插件页面上的说明开始使用地图： https://codelabs.developers.google.com/codelabs/google-maps-in-flutter/#1

https://pub.dev/packages/google_maps_flutter#usage

我面临的问题： （仅适用于限制 api 密钥接受来自 ios 中特定捆绑标识符的请求的人）

我遇到的问题是出现了一个灰色的空白框而不是地图。

问题原来是我限制了我的 api 密钥来限制请求： “接受来自具有这些捆绑标识符之一的 iOS 应用程序的请求。”

我更改了捆绑包标识符。我所要做的就是将捆绑标识符添加到允许的标识符列表中。地图重新出现。

您可以通过在应用程序代码中对“PRODUCT_BUNDLE_IDENTIFIER =”进行全局搜索来找到 ios 包标识符。

您可以通过以下方式进入 api 密钥编辑页面：

在搜索栏中搜索谷歌地图。 (https://console.cloud.google.com/google/maps-apis) 单击左侧窗格上的凭据选项卡（这会显示您的所有 api 密钥） 选择您要编辑的 api 密钥 添加您的捆绑包标识符

【参考方案16】：

确保此处的密钥与地图显示中使用的 API 密钥相同： 或使用正确的 API_KEY 将此元标记添加到您的清单文件中

<meta-data android:name="com.google.android.geo.API_KEY"
android:value="API_KEY"/>

【参考方案17】：

我按照文档做了所有正确的事情，但我仍然面临同样的问题。问题是我的模拟器不支持游戏商店。所以我所做的就是卸载旧的模拟器并安装最新的支持游戏商店。它对我有用。

【参考方案18】：

执行以下简单步骤：（这对我有用）

删除之前的密钥并创建一个新的 API 密钥。 将新 API 密钥粘贴到 Android>app>source>main>AndroidManifesto.xml 文件中，其中写入了之前的 API 密钥。 现在在运行之前转到 Android Studio 中的终端并运行“flutter clean”。 现在重新运行应用程序。（让它停止然后播放）。 等一下，你会看到地图。

【参考方案19】：

由于IP ADDRESS ALLOWANCE 设置，我遇到了这个问题并解决了它！如果您尝试了上述解决方案并且没有像我的情况那样工作。检查您的 IP 地址是否已更改或使用不同的 IP 地址。我忘记了我在外面，因此谷歌地图没有加载。

【参考方案20】：

如果以上方法都试过了，还是不行，那就做这两件事

可能是您没有等待足够多的时间让地图 展示。就我而言，在尝试了以上所有方法之后，我不得不运行 应用在真实设备中，然后等待一段时间（约 30 秒） 以显示地图界面。 如果您必须在 emulator 中运行，那么请检查您的 Internet 连接，如果 你正在使用模拟器。确保 Wi-Fi 图标已打开 然后转到 Wi-Fi 设置并确保 Androidwifi 显示 “已连接”。如果没有，请按照https://***.com/a/52765004/6909825 的回答进行一些设置