扑动中的谷歌地图没有出现

Question

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

Answer 1

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

Answer 2

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

• 添加

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

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

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

Answer 3

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

1. 启用 SDK：

2. 将它们添加到 API 限制中

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

Answer 4

• 在模拟器中打开你的谷歌地图。
• 如果那个谷歌地图没有显示地图，问题出在你的模拟器谷歌地图上。
• 您必须在模拟器中更新或重新安装谷歌地图。
• 这对我有用。

Answer 5

在尝试了上述所有总结后：

• 在 Cloud Console 上启用 Android 和 iOS SDK
• 在 Android Manifest 中添加了密钥
• 添加了 iOs Runner 的密钥
• 在我的应用程序上添加地图
• 运行命令 Flutter clean
  

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

Answer 6

经过一天的寻找解决方案后，我发现我添加了错误的 api 密钥。因此，在构建 apk 之前请仔细检查您的 api 密钥；

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

Answer 7

实际上，通过在上述教程中搜索问题，我没有找到任何答案。我找到了另一种地图方式，它与我的效果很好，所以我将其发布，因为它可能对其他人有帮助。您需要 1- 将其添加到 pubspec.yaml 中才能获取插件。2- 添加 android 和 Ios 的密钥 3- 在 main.c 中添加此代码

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;
  }
}