在Flutter项目中集成Google地图时遇到以下问题：按照官方文档添加了google_maps_flutter插件和API密钥，但地图始终显示为空白网格，没有加载实际地图。Android和iOS端都测试过，Logcat显示"API key not valid"，但确认密钥在Google Cloud控制台已启用且没有限制。请问该如何排查这个问题？是密钥配置问题还是其他原因？

zlyuanteng 1楼

首先需要在Google Cloud Platform创建项目并启用Google Maps API。
在pubspec.yaml中添加依赖：

dependencies:
  google_maps_flutter: ^2.0.6

获取API密钥：在Google Cloud Console的凭证页面生成一个Android和iOS平台的地图API密钥。
在main.dart文件中初始化地图：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MapSample(),
    );
  }
}

class MapSample extends StatefulWidget {
  @override
  State<MapSample> createState() => MapSampleState();
}

class MapSampleState extends State<MapSample> {
  GoogleMapController mapController;

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: LatLng(37.77483, -122.41942), // 设置地图中心点
          zoom: 11.0,
        ),
      ),
    );
  }
}

最后将API密钥添加到Android的AndroidManifest.xml和iOS的Info.plist文件中。

更多关于Flutter教程集成Google地图的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

vueper 2楼

作为屌丝程序员，推荐从官方文档入手学习。首先确保你已创建好Google Maps API Key，在pubspec.yaml里添加google_maps_flutter依赖。

创建一个GoogleMap Widget，并设置cameraPosition属性定义初始视图。
使用GoogleMap组件，传入mapType、initialCameraPosition等参数。
若要添加标记，可用Marker类，设置position和infoWindow。
配置Android时需在manifest.xml添加meta-data标签。
iOS需要在AppDelegate中初始化Maps SDK。

示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MapSample(),
    );
  }
}

class MapSample extends StatefulWidget {
  @override
  State<MapSample> createState() => MapSampleState();
}

class MapSampleState extends State<MapSample> {
  GoogleMapController mapController;

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: LatLng(37.77483, -122.41942),
          zoom: 11.0,
        ),
      ),
    );
  }
}

记得替换API key并根据需求调整功能。

phonegap100 3楼

Flutter集成Google地图教程

基本步骤

首先添加google_maps_flutter依赖到pubspec.yaml文件：

dependencies:
  google_maps_flutter: ^2.2.0
  flutter:
    sdk: flutter

获取Google Maps API密钥

前往Google Cloud Console
创建或选择项目
启用"Maps SDK for Android"和"Maps SDK for iOS"
创建API密钥

基本实现代码

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

class MapSample extends StatefulWidget {
  @override
  _MapSampleState createState() => _MapSampleState();
}

class _MapSampleState extends State<MapSample> {
  late GoogleMapController mapController;

  final LatLng _center = const LatLng(37.7749, -122.4194); // 旧金山坐标

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Google Maps'),
      ),
      body: GoogleMap(
        onMapCreated: (GoogleMapController controller) {
          mapController = controller;
        },
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 11.0,
        ),
      ),
    );
  }
}

平台配置

Android配置

在android/app/src/main/AndroidManifest.xml中添加：

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

iOS配置

在ios/Runner/AppDelegate.swift中添加：

GMSServices.provideAPIKey("YOUR_API_KEY")