如何在Flutter中添加Google Maps视图及优质地图插件推荐

我当初第一次在Flutter里开发地图功能时，也觉得原生支持不够友好，但现在生态已经成熟很多了，给你整理一下实用的方案：

一、集成Google Maps官方插件 #

官方的google_maps_flutter是最稳定的选择，步骤如下：

1. 添加依赖
   在你的pubspec.yaml文件中加入：

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.5.0 # 请使用最新版本

然后执行flutter pub get安装依赖。

2. 获取Google Maps API密钥

• 登录Google Cloud控制台，启用「Maps SDK for Android」和「Maps SDK for iOS」
• 创建API密钥，并做好密钥限制（比如绑定应用包名、SHA-1指纹），避免被滥用

3. 配置Android项目
   在android/app/src/main/AndroidManifest.xml的<application>标签内添加：

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="你的API密钥"/>

同时别忘了添加位置权限：

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

4. 配置iOS项目
   在ios/Runner/Info.plist中添加：

<key>GMSServicesAPIKey</key>
<string>你的API密钥</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>需要访问你的位置以显示地图</string>

5. 基础代码示例

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

class MapScreen extends StatefulWidget {
  const MapScreen({super.key});

  @override
  State<MapScreen> createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  late GoogleMapController mapController;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Google Maps示例')),
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 12.0,
        ),
      ),
    );
  }
}

二、其他优质Flutter地图插件推荐 #

如果不想依赖Google Maps，这些插件也很实用：

• flutter_map
  轻量级开源插件，支持OpenStreetMap、Mapbox等多种瓦片数据源，不需要API密钥，自定义自由度极高，适合做轻量化地图功能。

• mapbox_gl
  集成Mapbox地图服务，支持3D视图、自定义地图样式、导航路线规划等高级功能，适合对地图交互性和视觉效果有高要求的应用。

• location
  配合地图插件使用的辅助工具，能快速获取用户当前位置、监听位置变化，是地图功能的常用配套插件。

小提示 #

• 记得在Android和iOS项目中配置好位置权限，否则地图无法获取用户位置
• 地图组件比较占资源，在页面销毁时记得调用控制器的dispose()方法，避免内存泄漏

内容的提问来源于stack exchange，提问作者Richard Nsama