每天一个Flutter开发小项目 (12) : 探索Flutter地图与定位 - 构建你的“附近地点发现”App

Neo Evolution

于 2025-03-05 19:16:05 发布

阅读量948

点赞数 22

分类专栏： Flutter 文章标签： flutter 开发语言 android ios

本文链接：https://blog.youkuaiyun.com/m0_64916781/article/details/146050774

版权

引言

再次热烈欢迎回到 每天一个Flutter开发小项目 系列博客！时光荏苒，转眼间我们已经共同走过了十一个技术小项目的旅程。在之前的博客中，我们学习了 UI 构建、状态管理、网络请求、动画效果、表单验证等一系列 Flutter 核心技能，您已经能够构建功能丰富、体验良好的 Flutter 应用。

在移动互联网时代，位置服务 (Location Services) 已经成为各种应用不可或缺的功能。从地图导航、外卖点餐、共享单车，到社交签到、附近搜索、智能家居，位置服务无处不在，极大地丰富了应用的功能和用户体验。今天，我们将聚焦 Flutter 应用的 “地理感知” —— 地图与定位，并构建一个实用的 “附近地点发现”应用，让您掌握 Flutter 应用集成地图、获取定位、标记地点的专业技巧，为您的应用插上“位置服务”的翅膀。

通过本篇博客，您将深入学习：

Flutter 地图与定位的核心概念: 理解地理位置服务的应用场景，掌握 Flutter 中集成地图和定位服务的关键技术和核心组件。
google_maps_flutter 插件的专业应用: 深入学习 google_maps_flutter 插件，掌握在 Flutter 应用中集成 Google 地图，显示地图、控制地图、添加标记、绘制图形等全流程。
geolocator 插件的精确定位: 深入学习 geolocator 插件，掌握在 Flutter 应用中获取用户设备精确定位信息，包括经纬度、海拔、速度、方向等。
地图标记 (Markers) 的灵活定制: 学习如何在地图上添加各种类型的标记 (Markers)，包括自定义标记图标、信息窗口、标记点击事件等，实现更丰富的地图信息展示。
动态地图交互与控制: 掌握如何通过代码动态控制地图的中心位置、缩放级别、地图类型等，实现更灵活的地图交互体验。
“附近地点发现”应用的功能实现: 构建一个实用的 “附近地点发现”应用，包括地图显示、用户定位、附近地点标记、地点信息展示等核心功能。
Flutter 应用位置服务能力的专业技能: 从地图插件集成到定位功能实现，全面提升 Flutter 应用位置服务能力的专业技能，为构建更具地理感知能力的应用奠定基础。

项目简介： “附近地点发现”应用

我们的 “附近地点发现”应用将围绕以下核心功能展开：

地图显示: 应用主页显示 Google 地图，并加载地图瓦片数据。
用户定位: 应用启动时，获取用户设备当前位置，并在地图上标记用户当前位置。
“附近地点” 模拟数据: 应用预置一些模拟的 “附近地点” 数据 (例如，咖啡馆、餐厅、公园等)，包括地点名称、经纬度、地点类型等信息。
地图标记 “附近地点”: 将模拟的 “附近地点” 数据在地图上以标记 (Marker) 的形式展示，不同类型的地点可以使用不同的标记图标。
标记信息窗口: 点击地图上的地点标记，显示地点的信息窗口 (InfoWindow)，包含地点名称、地点类型等信息。
地图交互: 用户可以拖动地图、缩放地图，与地图进行交互。
动态地图中心: 可以添加一个 “回到我的位置” 按钮，点击后将地图中心移动到用户当前位置。
权限处理: 应用启动时，请求用户设备的位置权限，并处理用户拒绝授权的情况。

通过构建 “附近地点发现”应用，我们将重点实践：

google_maps_flutter 插件集成: 在 Flutter 应用中集成 google_maps_flutter 插件，搭建地图显示环境。
Google Maps API Key 配置: 获取 Google Maps API Key，并配置到 Android 和 iOS 应用中，使地图插件能够正常工作。
geolocator 插件集成: 在 Flutter 应用中集成 geolocator 插件，搭建定位服务环境。
用户位置获取: 使用 geolocator 插件获取用户设备的当前位置信息 (经纬度)。
地图中心定位: 将地图中心移动到用户当前位置，并调整地图缩放级别，使用户能够看到自己周围的地图。
地图标记添加: 在地图上添加多个标记 (Markers)，表示 “附近地点”，并自定义标记图标和信息窗口。
地图交互与控制: 通过 GoogleMapController 控制地图的中心位置、缩放级别等。
权限请求与处理: 在 Android 和 iOS 平台请求位置权限，并处理用户拒绝授权的情况。
Flutter 地图与定位功能的完整实现: 从地图显示到地点标记，完整实现 Flutter 地图与定位功能的应用。

Flutter 地图与定位核心概念与插件解析

在开始构建 “附近地点发现”应用之前，我们先来深入理解 Flutter 地图与定位的核心概念，并重点解析 google_maps_flutter 和 geolocator 插件，为后续的实战打牢理论基础。

地理位置服务 (Location Services) 的应用场景: 地理位置服务在现代移动应用中应用广泛，常见的应用场景包括：
- 地图导航: 例如，Google Maps, 高德地图, 百度地图等，提供路径规划、实时导航、地点搜索等功能。
- 位置共享社交: 例如，微信朋友圈位置、微博定位、Foursquare 等，允许用户分享自己的地理位置，发现附近的朋友和地点。
- 本地生活服务: 例如，美团、饿了么、大众点评等，根据用户位置推荐附近的餐厅、酒店、电影院等本地生活服务。
- 出行服务: 例如，滴滴出行、Uber、共享单车等，基于用户位置提供打车、租车、单车等出行服务。
- 游戏: 例如，Pokemon Go, Ingress 等，基于地理位置的游戏，将虚拟游戏世界与现实世界结合。
- 物联网 (IoT): 例如，智能家居、智能穿戴设备、车辆监控等，基于地理位置实现设备定位、位置追踪、地理围栏等功能。
google_maps_flutter 插件: Flutter 官方提供的 Google Maps 插件，用于在 Flutter 应用中集成 Google 地图。 google_maps_flutter 插件基于原生平台 (Android 和 iOS) 的 Google Maps SDK 构建，提供了丰富的地图功能，包括：
- 地图显示 (GoogleMap Widget): 使用 GoogleMap Widget 可以方便地在 Flutter 应用中显示 Google 地图。
- 地图控制 (GoogleMapController): 使用 GoogleMapController 可以通过代码动态控制地图的中心位置、缩放级别、地图类型、旋转角度、倾斜角度等。
- 地图标记 (Markers): 可以在地图上添加各种类型的标记 (Markers)，例如，自定义图标标记、信息窗口标记、可拖动标记等，用于标注地点信息。
- 地图图形 (Polylines, Polygons, Circles): 可以在地图上绘制各种图形，例如，折线 (Polylines)、多边形 (Polygons)、圆形 (Circles)，用于路径绘制、区域划分等。
- 地图事件监听 (onMapCreated, onTap, onLongPress, onCameraMove, onCameraIdle): 可以监听地图的各种事件，例如，地图创建完成事件、地图点击事件、地图长按事件、地图相机移动事件、地图相机停止移动事件等，实现地图交互功能。
- 地图类型切换 (mapType): 可以切换地图的类型，例如，普通地图 (normal)、卫星地图 (satellite)、混合地图 (hybrid)、地形地图 (terrain) 等。
- 交通信息显示 (trafficEnabled): 可以控制是否在地图上显示交通信息。
- 室内地图显示 (indoorViewEnabled): 可以控制是否在地图上显示室内地图。
- 用户位置显示 (myLocationEnabled): 可以控制是否在地图上显示用户当前位置。
- 指南针显示 (compassEnabled): 可以控制是否在地图上显示指南针。
- 缩放控件显示 (zoomControlsEnabled): 可以控制是否在地图上显示缩放控件。
- 手势控制 (scrollGesturesEnabled, zoomGesturesEnabled, tiltGesturesEnabled, rotateGesturesEnabled): 可以控制地图的手势操作，例如，是否允许拖动地图、缩放地图、倾斜地图、旋转地图等。
Google Maps API Key: Google Maps Platform 的 API 密钥，使用 google_maps_flutter 插件需要配置 Google Maps API Key，才能正常加载地图数据和使用地图服务。您需要在 Google Cloud Console 中创建 Google Maps Platform 项目，启用 Maps SDK for Android 和 Maps SDK for iOS，并获取 API Key。 API Key 需要配置到 Android 应用的 AndroidManifest.xml 文件和 iOS 应用的 AppDelegate.swift 或 AppDelegate.m 文件中。
geolocator 插件: Flutter 社区提供的地理定位插件，用于在 Flutter 应用中获取用户设备的位置信息。 geolocator 插件支持 Android 和 iOS 平台，提供了多种定位功能，包括：
- 获取当前位置 (getCurrentPosition): 获取设备当前的精确定位信息，包括经纬度、海拔、速度、方向、时间戳、定位精度等。 getCurrentPosition 方法会一次性获取当前位置，适用于获取用户当前位置的场景。
- 位置流监听 (getPositionStream): 持续监听设备位置变化，并周期性地返回新的位置信息。 getPositionStream 方法会返回一个位置信息流 (Stream)，可以实时监听用户位置变化，适用于导航、运动追踪等需要实时位置更新的场景。
- 位置距离计算 (distanceBetween): 计算两个经纬度坐标之间的距离 (单位：米)。
- 地址解析与反解析 (placemarkFromCoordinates, placemarkFromAddress): 根据经纬度坐标获取地址信息 (反地理编码)，例如，国家、省份、城市、街道、门牌号等。 根据地址信息获取经纬度坐标 (地理编码)。
- 位置权限请求与管理 (requestPermission, getServiceStatus, isLocationServiceEnabled): 请求用户设备的位置权限，检查位置服务是否开启，监听位置服务状态变化。 geolocator 插件提供了完善的位置权限管理 API，方便开发者处理位置权限相关的逻辑。
位置权限 (Location Permissions): Android 和 iOS 系统对位置信息访问的权限控制。 在 Android 和 iOS 平台上获取用户位置信息，都需要先获取用户的位置权限。位置权限分为 粗略位置权限 (ACCESS_COARSE_LOCATION) 和 精确定位权限 (ACCESS_FINE_LOCATION)。 geolocator 插件需要精确定位权限 (ACCESS_FINE_LOCATION) 才能获取到更精确的位置信息。位置权限需要在 Android 应用的 AndroidManifest.xml 文件和 iOS 应用的 Info.plist 文件中配置，并在代码中动态请求用户授权。

实战步骤：构建 “附近地点发现”应用

接下来，我们将一步步使用 google_maps_flutter 和 geolocator 插件构建我们的 “附近地点发现”应用。

步骤 1：创建新的 Flutter 项目并添加 google_maps_flutter 和 geolocator 依赖

首先，创建一个新的 Flutter 项目，命名为 nearby_places_app。

然后在 pubspec.yaml 文件中添加 google_maps_flutter 和 geolocator 依赖：

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.6 #  使用最新版本，请查阅 pub.dev 获取最新版本号
  geolocator: ^8.0.1 #  使用最新版本，请查阅 pub.dev 获取最新版本号

运行 flutter pub get 命令获取依赖。

步骤 2：获取 Google Maps API Key 并配置到 Android 和 iOS 应用

创建 Google Cloud Platform 项目: 访问 Google Cloud Console，创建一个新的 Google Cloud Platform 项目 (如果还没有项目)。
启用 Maps SDK for Android 和 Maps SDK for iOS: 在项目中，搜索 “Maps SDK for Android” 和 “Maps SDK for iOS”，分别启用这两个 API。
创建 API 密钥: 在项目中，导航到 “API 和服务” -> “凭据”，点击 “创建凭据”，选择 “API 密钥”。复制生成的 API 密钥 (API Key)。

配置 Android 应用:

打开 android/app/src/main/AndroidManifest.xml 文件。
在 <application> 标签内，添加 <meta-data> 标签，配置 API Key：

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

配置 iOS 应用:

打开 ios/Runner/AppDelegate.swift 文件 (或 AppDelegate.m 文件，如果使用 Objective-C)。
在 application:didFinishLaunchingWithOptions: 方法中，添加代码配置 API Key：

// AppDelegate.swift (Swift)
import UIKit
import Flutter
import GoogleMaps

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
     
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {