Flutter如何集成谷歌地图

我想在Flutter项目中集成谷歌地图功能，但不太清楚具体步骤。请问需要安装哪些依赖包？如何获取API密钥？地图的基本配置和权限设置应该怎样操作？能否提供一个简单的实现示例？

2 回复

在Flutter中集成谷歌地图，使用google_maps_flutter插件。步骤如下：

  1. 在pubspec.yaml中添加依赖。
  2. 获取API密钥并配置Android和iOS平台。
  3. 在代码中引入插件并添加地图组件。
  4. 设置初始位置和标记等。

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


在Flutter中集成谷歌地图，可以通过 google_maps_flutter 插件实现。以下是详细步骤：

1. 添加依赖

在 pubspec.yaml 文件中添加依赖：

dependencies:
  google_maps_flutter: ^2.2.0

运行 flutter pub get 安装。

2. 配置平台权限

Android：

  • 在 AndroidManifest.xml 中添加权限和API密钥：
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<meta-data
  android:name="com.google.android.geo.API_KEY"
  android:value="YOUR_ANDROID_API_KEY"/>

iOS：

  • 在 Info.plist 中添加权限描述和API密钥：
<key>NSLocationWhenInUseUsageDescription</key>
<string>需要位置权限展示地图</string>
<key>io.flutter.embedded_views_preview</key>
<true/>
  • 在 AppDelegate.swift 中导入GoogleMaps并配置API密钥：
import GoogleMaps
GMSServices.provideAPIKey("YOUR_IOS_API_KEY")

3. 获取API密钥

  1. 访问 Google Cloud Console。
  2. 启用 “Maps SDK for Android” 和 “Maps SDK for iOS”。
  3. 创建凭据（API密钥），并配置应用限制。

4. 基本使用示例

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> {
  GoogleMapController? mapController;
  final LatLng _center = const LatLng(37.42796133580664, -122.085749655962);

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

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

注意事项

  • 确保API密钥正确且已启用相应服务。
  • 在真机上测试位置权限功能。
  • 可通过 GoogleMap 组件的参数添加标记、监听手势等。

完成以上步骤后，即可在Flutter应用中显示谷歌地图。

回到顶部