使用谷歌地图在 Flutter 应用中添加地图

我无法想象没有谷歌地图的生活会是什么样子。 我们将它用于所有事情，从寻找到目的地的方向，到搜索附近的餐馆或加油站，再到放大和缩小地图以查看地球上任何位置的街景。

将 Google 地图添加到您的移动应用程序可以为您的用户打开一个全新的世界——从字面上看。 在本教程中，我们将向您展示如何使用官方插件将 Google 地图集成到您的 Flutter 应用程序中。

以下是我们将介绍的内容：

• 在 Google Cloud Platform 中创建项目

• 启用地图 API

• 生成和限制 API 密钥

• 在 Flutter (Android) 中添加谷歌地图

• 在 Flutter (iOS) 中添加谷歌地图

• 添加 GoogleMap小部件

• Flutter 中的样式化地图

• 使用 GoogleMap小部件

• 显示地图列表

• 拍摄您所在位置的快照

在 Google Cloud Platform 中创建项目

第一步是在 Google Developers Console 创建一个项目。 这是必需的，因为您需要 API 将 Google 地图集成到您的应用程序中。

前往 Google Developers Console 并单击已选择的项目。

单击 新项目 并输入详细信息。

再次单击当前项目名称，您应该会在列表中看到创建的新项目。

---

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验 了解更多 →

---

启用地图 API

创建项目后，您必须为 Android 和 iOS 启用 Maps API SDK。

1. 单击 的库菜单 左侧

2. 搜索“地图 SDK”

3. 单击 iOS 版 Maps SDK ，然后单击 启用

4. 单击 Maps SDK for Android ，然后单击 启用

生成和限制 API 密钥

需要注意的是，对 Google Map API 的访问不是免费的。 因此，您必须为其创建一组 API 密钥并限制其权限，以减少未经授权使用的机会。 这是生成密钥的方法。

1. 单击 的凭据菜单 左侧

2. 单击 + 创建凭据 按钮

3. 选择 API 密钥 选项

如果您同时针对这两个平台，您应该获取两个 API 密钥，以便更好地跟踪它们。

创建 API 密钥后，我强烈建议实施一些限制。 例如，如果您愿意将 API 密钥仅用于地图，那么您应该只允许地图服务使用它。

有两种类型的限制：

1. 应用程序限制使您能够定义哪种类型的应用程序应有权访问此密钥（即 Android 或 iOS）。 您可以选择适当的选项以确保您创建的密钥仅适用于该特定平台

2. API 限制使您可以选择使用此密钥可访问哪些服务。 如果它只是用于地图，您将从列表中选择 Maps API

在 Flutter 应用中添加谷歌地图 (Android)

为了能够通过您在上一节中创建的 API 密钥在应用内使用 Google 地图，您必须按照以下说明进行复制和粘贴。

首先，打开你的 Flutter 项目并导航到这个位置的文件： android/app/src/main/AndroidManifest.xml.

接下来，粘贴下面的代码：

<application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR KEY HERE"/>

替换值 "YOUR KEY HERE"使用您创建的 API 密钥。 然后，添加位置权限。

---

来自 LogRocket 的更多精彩文章：

• 不要错过 The Replay 来自 LogRocket 的精选时事通讯

• 了解 LogRocket 的 Galileo 如何消除噪音以主动解决应用程序中的问题

• 使用 React 的 useEffect 优化应用程序的性能

• 之间切换 在多个 Node 版本

• 了解如何 使用 AnimXYZ 为您的 React 应用程序制作动画

• 探索 Tauri ，一个用于构建二进制文件的新框架

• 比较 NestJS 与 Express.js

---

现在 AndroidManifest.xml文件应如下所示：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.p