Flutter - APP跳转谷歌地图

最新推荐文章于 2025-04-02 09:30:58 发布

存在即假象

最新推荐文章于 2025-04-02 09:30:58 发布

阅读量921

点赞数 26

文章标签： flutter 百度

本文链接：https://blog.youkuaiyun.com/weixin_73722928/article/details/140019255

版权

开始使用 Flutter

若要开始使用 Flutter，最简单的方法就是使用 Flutter 命令行工具来创建打造简单入门体验所需的全部代码。

$ flutter create google_maps_in_flutter
Creating project google_maps_in_flutter...
[Listing of created files elided]
Wrote 127 files.

All done!
In order to run your application, type:

  $ cd google_maps_in_flutter
  $ flutter run

Your application code is in google_maps_in_flutter/lib/main.dart.

添加 Google 地图 Flutter 插件作为依赖项

使用 Pub 软件包可以轻松为 Flutter 应用添加更多功能。在此 Codelab 中，您可以通过从项目目录运行以下命令来引入 Google 地图 Flutter 插件。

$ cd google_maps_in_flutter
$ flutter pub add google_maps_flutter
Resolving dependencies...
  async 2.6.1 (2.8.2 available)
  charcode 1.2.0 (1.3.1 available)
+ flutter_plugin_android_lifecycle 2.0.3
+ google_maps_flutter 2.0.8
+ google_maps_flutter_platform_interface 2.1.1
  matcher 0.12.10 (0.12.11 available)
  meta 1.3.0 (1.7.0 available)
+ plugin_platform_interface 2.0.1
+ stream_transform 2.0.0
  test_api 0.3.0 (0.4.3 available)
Downloading google_maps_flutter 2.0.8...
Downloading flutter_plugin_android_lifecycle 2.0.3...
Changed 5 dependencies!

此外，此 Codelab 还会介绍如何在网页版 Flutter 中使用 Google 地图。不过，该插件的网页版尚未进行联合，因此您还需要将其添加到项目中。

$ flutter pub add google_maps_flutter_web
Resolving dependencies...
  async 2.6.1 (2.8.2 available)
  charcode 1.2.0 (1.3.1 available)
+ csslib 0.17.0
+ flutter_web_plugins 0.0.0 from sdk flutter
+ google_maps 5.3.0
+ google_maps_flutter_web 0.3.0+4
+ html 0.15.0
+ js 0.6.3
+ js_wrapping 0.7.3
  matcher 0.12.10 (0.12.11 available)
  meta 1.3.0 (1.7.0 available)
+ sanitize_html 2.0.0
  test_api 0.3.0 (0.4.3 available)
Changed 8 dependencies!

配置 iOS `platform`

若要获取 iOS 版 Google 地图 SDK 的最新版本，您至少需要使用 iOS 11 版本的平台。请按如下方式修改 ios/Podfile。

ios/Podfile

# Set platform to 11.0 to enable latest Google Maps SDK
platform :ios, '11.0' # Uncomment and set to 11.

# CocoaPods analytics sends network stats synchronously affecting flutter build latency.
ENV['COCOAPODS_DISABLE_STATS'] = 'true'

配置 Android `minSDK`

若要使用 Android 版 Google 地图 SDK，您需要将 minSDK 设置为 20。请按如下方式修改 android/app/build.gradle。

android/app/build.gradle

android {
    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.example.google_maps_in_flutter"
        minSdkVersion 20                      // Update from 16 to 20
        targetSdkVersion 30
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }
}

API 密钥是关键所在

若要在 Flutter 应用中使用 Google 地图，您需要按照 Maps SDK for Android、Maps SDK for iOS 和 Maps JavaScript API 的“使用 API 密钥”部分中的说明，通过 Google Maps Platform 配置 API 项目。有了 API 密钥，您就可以按照以下步骤配置 Android 和 iOS 应用。