Question

我正在尝试按照本教程“ https://medium.com/flutter-io/google-maps-and-flutter-cfb330f9a245”的方式在Google控件中添加Google Map。我用谷歌地图键更新了Android清单，并添加了访问fine_location的权限。我的模拟器上没有显示白色屏幕。我花了很多时间试图修复它，但徒劳无功。我还尝试通过插件“ https://pub.dartlang.org/packages/google_maps_flutter#-readme-tab-”使用示例，但是显示map并没有帮助。谢谢您的任何帮助

Answer 1

在模拟器中打开您的 google地图。
如果该Google地图未显示地图，则问题出在您的模拟器Google地图上。
您必须在模拟器中更新或重新安装google map 。
这对我有用。

Answer 2

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

启用SDK：
将它们添加到API限制中

您完成了！您现在需要做的就是复制API密钥并将其添加到您的AndroidManifest文件中。另外请记住，您实际上不需要添加一个计费帐户即可运行。希望这对您有用！

Answer 3

好吧，在AndroidManifest.xml文件中添加它的API密钥

添加

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

在</activity>和</application>之间。

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

Answer 4

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

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

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

Answer 5

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

Answer 6

实际上，通过上述教程中的问题搜索，我没有找到任何答案。我找到了另一种地图绘制方法，并且可以与我一起正常使用，因此我将其发布，因为它可能会帮助其他人。您需要将其添加到pubspec.yaml中以获取插件。 2-添加Android和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;
  }
}

Answer 7

搜索解决方案 1 天后，我发现我写错了 api 密钥。所以在构建 apk 之前仔细检查你的 api 密钥；

我已将我的 android api 密钥放在 ios 中。

Answer 8

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

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

Answer 9

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

Answer 10

在“摘要”中尝试了以上所有内容之后：

在云控制台上启用了Android和iOs SDK
将秘密密钥添加到Android清单
将密钥添加到iOs Runner
在我的应用程序上添加地图
运行Flutter clean命令

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

Answer 11

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

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

Answer 12

我按照flutter插件页面上的说明开始使用地图： 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键编辑页面：

在搜索栏中搜索Google地图。（https://console.cloud.google.com/google/maps-apis）
在左侧窗格中单击“凭据”标签（显示所有api键）
选择要编辑的api密钥
添加您的捆绑包标识符

Answer 13

Flutter 1.7.5 +，Dart 2.8.5 +

我已经尝试了一切，但是仍然无法在iOS上正常工作，我检查了权限，等等都还不错，但显然，此问题与网络视图“ io.flutter.embedded_views_preview”有关。设置此info.plist文件后，即可正常工作。

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

Answer 14

我也遇到了错误或黑屏的情况，因此，我的解决方案是在Google Cloud Platform上启用Android或IOS的Maps SDK。启用SDK之后，您的应用肯定会在一分钟内显示地图。

Answer 15

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

Answer 16

在我的调试电话上出现了相同的问题。事实证明，将其连接到Internet上很有帮助；）（没有注意到Wi-Fi已关闭）

Answer 17

转到Google云控制台，并将您的APIKey切换为已启用，它将起作用，我也遇到了同样的问题和该应用程序（我将其安装在android物理设备上，但无法正常工作，并在左下角以jsut的形式显示jsut，

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

Answer 18

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

Answer 19

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

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

扑朔迷离的Google地图没有出现

19 个答案: