Flutter地点选择器插件google_places_picker_advance的使用

Flutter地点选择器插件google_places_picker_advance的使用

Google Maps Place Picker

google_places_picker_advance 是一个基于 Flutter 的插件，通过 Google Maps 提供地点选择功能。

该项目依赖以下包：

• 使用 Flutter 官方的 google_maps_flutter 进行地图展示。
• 使用 Baseflow 的 geolocator 获取当前位置。
• 使用 hadrienlejard 的 google_maps_webservice 调用 Place 和 Geocoding API。
• 使用 kevmoo 的 tuple 构建器。

支持

如果你觉得这个插件对你有用或节省了时间，请不要犹豫买杯咖啡支持我！😉
更多的咖啡因意味着未来可以开发更多有用的功能。

开始使用

获取 API 密钥

1. 在 Google Cloud Console 获取 API 密钥。
2. 启用以下 API：
   • Maps SDK for Android
   • Maps SDK for iOS
   • Maps JavaScript API
   • Places API
   • Geolocation API
   • Geocoding API

你也可以在这里找到详细的启用步骤：Google Maps 平台入门指南。

Android 配置

在 android/app/src/main/AndroidManifest.xml 中添加 API 密钥：

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

注意：从版本 3.0.0 开始，geolocator 插件切换到了 AndroidX 版本的支持库。因此你需要确保你的 Android 项目也升级到支持 AndroidX。详细说明可以查看 Flutter 官方文档。

快速解决方案：

1. 在 gradle.properties 文件中添加以下内容：

   android.useAndroidX=true
   android.enableJetifier=true
   

2. 在 android/app/build.gradle 文件中设置 compileSdkVersion 为 32：

   android {
     compileSdkVersion 32
     ...
   }
   

3. 将所有 android. 依赖替换为其 AndroidX 对应版本（完整列表可参考 AndroidX 迁移指南）。

iOS 配置

在 ios/Runner/AppDelegate.m 中指定 API 密钥：

#include "AppDelegate.h"
#include "GeneratedPluginRegistrant.h"
#import "GoogleMaps/GoogleMaps.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:@"YOUR KEY HERE"];
  [GeneratedPluginRegistrant registerWithRegistry:self];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

在 Swift 代码中，同样在 ios/Runner/AppDelegate.swift 中指定 API 密钥：

import UIKit
import Flutter
import GoogleMaps

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?
  ) -> Bool {
    GMSServices.provideAPIKey("YOUR KEY HERE")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

同时，需要在 Info.plist 文件中添加以下内容以访问设备位置：

<key>NSLocationWhenInUseUsageDescription</key>
<string>This app needs access to location when open.</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>This app needs access to location when in the background.</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>This app needs access to location when open and in the background.</string>

此外，还需要在 XCode 项目中启用 Background Modes 功能，并选择 Location Updates。

最后，在 Info.plist 文件中添加以下键值对以启用嵌入式视图预览：

<key>io.flutter.embedded_views_preview</key>
<true/>

使用方法

基本使用

可以通过 Navigator 推动到新页面，或者直接作为任何小部件的子组件使用。

当用户在地图上选择一个地点时，它会通过 onPlacePicked 回调返回结果。

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => PlacePicker(
      apiKey: APIKeys.apiKey,   // 替换为你的 API 密钥
      onPlacePicked: (result) { 
        print(result.address); 
        Navigator.of(context).pop();
      },
      initialPosition: LatLng(37.7749, -122.4194), // 初始位置（旧金山）
      useCurrentLocation: true, // 使用当前设备位置
    ),
  ),
);

PickResult 参数说明

以下是 PickResult 的参数及其描述：

注：以下结果仅在使用自动完成搜索或设置 usePlaceDetailSearch 为 true 时可用。

PickResult 可选参数

更多关于结果的信息可以参考 Google Places API 文档。

PlacePicker 参数说明

更多关于自动完成搜索的信息可以参考 Google Places 自动完成文档。

自定义选择地点的可视化效果

默认情况下，当用户通过自动完成搜索或拖动地图选择地点时，信息会显示在屏幕底部（FloatingCard）。

如果你不喜欢这种 UI/UX，可以通过 selectedPlaceWidgetBuilder 覆盖默认实现。可以复用 FloatingCard 或者根据需求构建全新的小部件。它堆叠在地图之上，因此可能需要使用 Positioned 小部件。

注意：使用此自定义选项不会触发 [onPlacePicked] 回调，因为它会覆盖默认的“选择这里”按钮。

PlacePicker(
  apiKey: APIKeys.apiKey,
  onPlacePicked: (result) {
    print(result.address);
    Navigator.of(context).pop();
  },
  initialPosition: HomePage.kInitialPosition,
  useCurrentLocation: true,
  selectedPlaceWidgetBuilder: (
    BuildContext context,
    PickResult selectedPlace,
    SearchingState state,
    bool isSearchBarFocused,
  ) {
    return isSearchBarFocused
        ? Container()
        // 可以复用 FloatingCard 或自定义小部件。
        : FloatingCard(
            bottomPosition: 0.0, // 使用 MediaQuery.of(context) 会导致重建。详见文档。
            leftPosition: 0.0,
            rightPosition: 0.0,
            width: 500,
            borderRadius: BorderRadius.circular(12.0),
            child: state == SearchingState.Searching
                ? Center(child: CircularProgressIndicator())
                : RaisedButton(
                    onPressed: () {
                      print("do something with [selectedPlace] data");
                    },
                  ),
          );
  },
),

参数说明：

自定义地标

默认情况下，地标图标具有简单的拖动动画。

你可以通过 pinBuilder 创建自己的地标小部件。

PlacePicker(
  apiKey: APIKeys.apiKey,
  pinBuilder: (BuildContext context, PinState state) {
    if (state == PinState.Idle) {
      return Icon(Icons.favorite_border);
    } else {
      return AnimatedIcon(...);
    }
  },
),

参数说明：

更改默认 FloatingCard 的颜色

虽然你可以构建自己的预测小部件，但仍然可以通过 themeData 更改默认小部件的样式：

// 浅色主题
final ThemeData lightTheme = ThemeData.light().copyWith(
  // FloatingCard 的背景颜色
  cardColor: Colors.white,
  buttonTheme: ButtonThemeData(
    // “选择这里”按钮的颜色
    buttonColor: Colors.black,
    textTheme: ButtonTextTheme.primary,
  ),
);

// 深色主题
final ThemeData darkTheme = ThemeData.dark().copyWith(
  // FloatingCard 的背景颜色
  cardColor: Colors.grey,
  buttonTheme: ButtonThemeData(
    // “选择这里”按钮的颜色
    buttonColor: Colors.yellow,
    textTheme: ButtonTextTheme.primary,
  ),
);