google_maps_flutter如何使用

我在使用google_maps_flutter插件时遇到一些问题：

  1. 如何正确配置API密钥？在Android和iOS平台上需要不同的设置吗？
  2. 地图显示空白，控制台没有报错信息，可能是什么原因？
  3. 如何在地图上添加自定义标记（Marker）并实现点击交互？
  4. 能否调整地图的初始缩放级别和中心坐标？具体怎么实现？
  5. 遇到"API not found"错误该如何解决？

希望能得到详细的代码示例和常见问题的排查步骤，谢谢！

2 回复

使用 google_maps_flutter 需先配置 API 密钥，在 AndroidManifest.xml 和 Info.plist 中添加。然后在 Flutter 中引入包，使用 GoogleMap 组件设置初始位置和标记即可显示地图。

更多关于google_maps_flutter如何使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


Google Maps Flutter 是一个用于在 Flutter 应用中集成 Google 地图的插件。以下是基本使用方法：

1. 安装配置

在 pubspec.yaml 中添加依赖：

dependencies:
  google_maps_flutter: ^2.2.3

2. Android 配置

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

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

3. iOS 配置

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

import GoogleMaps

GMSServices.provideAPIKey("YOUR_IOS_API_KEY")

4. 基本使用

import 'package:google_maps_flutter/google_maps_flutter.dart';

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

class _MapSampleState extends State<MapSample> {
  GoogleMapController? mapController;
  final LatLng _center = const LatLng(45.521563, -122.677433);

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

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      onMapCreated: _onMapCreated,
      initialCameraPosition: CameraPosition(
        target: _center,
        zoom: 11.0,
      ),
      markers: {
        Marker(
          markerId: MarkerId("center"),
          position: _center,
          infoWindow: InfoWindow(title: '中心点'),
        ),
      },
    );
  }
}

5. 主要功能

  • 地图类型：使用 mapType 参数设置（normal, satellite, hybrid, terrain）
  • 标记：通过 markers 添加标记点
  • 相机控制：使用 CameraPosition 控制视角和缩放
  • 手势：支持缩放、平移、旋转等手势操作

注意事项

  1. 需要在 Google Cloud Console 申请 API Key
  2. 确保启用 Maps SDK for Android 和 iOS
  3. 根据需要设置正确的权限和计费配置

这样就完成了 Google Maps 在 Flutter 中的基本集成。

回到顶部