Flutter地点选择插件google_maps_places_picker_refractored的使用

Flutter地点选择插件google_maps_places_picker_refractored的使用

Google Maps Places Picker Refractored

这是一个对fysoul17/google_maps_place_picker插件的分叉版本，增加了自定义样式和功能。所有功劳归于原始开发者。

该插件通过Flutter的google_maps_flutter小部件提供了一个“地点选择”功能。

项目依赖以下包：

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

预览

支持

如果本插件对你有用或节省了你的时间，请考虑买杯咖啡支持我！
更多咖啡意味着未来能制作更有用的项目。

Buy Me A Coffee

入门指南

获取API密钥

访问https://cloud.google.com/maps-platform/获取API密钥。

启用Google Maps SDK

1. 前往Google开发者控制台。
2. 选择你要启用Google Maps的项目。
3. 在导航菜单中选择“Google Maps”。
4. 点击“APIs”，然后在“附加APIs”部分启用以下选项：
   • 对于Android，启用“Maps SDK for Android”。
   • 对于iOS，启用“Maps SDK for iOS”。
5. 确保启用的API出现在“已启用APIs”部分。

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。详细说明可以参考这里。

以下是快速解决步骤：

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

   android.useAndroidX=true
   android.enableJetifier=true
   

2. 将android/app/build.gradle文件中的compileSdkVersion设置为28：

   android {
     compileSdkVersion 28
   
     ...
   }
   

3. 替换所有android.依赖项为对应的AndroidX版本（完整列表可参考这里）。

iOS配置

在应用委托文件ios/Runner/AppDelegate.m中添加API密钥：

#import "AppDelegate.h"
#import "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代码中，添加API密钥到ios/Runner/AppDelegate.swift：

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)
  }
}

在iOS上，为了访问设备位置，你需要在Info.plist文件中添加以下键值对：

<key>NSLocationWhenInUseUsageDescription</key>
<string>此应用需要在打开时访问您的位置。</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>此应用需要在后台访问您的位置。</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>此应用需要在打开和后台时访问您的位置。</string>

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

为了嵌入视图预览，向应用的Info.plist文件中添加一个布尔属性，键为io.flutter.embedded_views_preview，值为YES：

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

使用方法

基本用法

你可以通过Navigator.push跳转到新页面，也可以将PlacePicker作为任何小部件的子组件。

当用户在地图上选择一个地点时，它会通过onPlacePicked回调返回PickResult类型的结果。你也可以通过selectedPlaceWidgetBuilder构建自己的方式来获取结果。

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => PlacePicker(
      apiKey: APIKeys.apiKey,   // 替换为你的API密钥
      onPlacePicked: (result) {
        print(result.address); // 打印选中的地址
        Navigator.of(context).pop();
      },
      initialPosition: HomePage.kInitialPosition, // 初始地图中心位置
      useCurrentLocation: true, // 是否使用设备当前位置
    ),
  ),
);

PickResult 类型

PickResult包含以下字段：

可选字段（仅在启用自动补全搜索或usePlaceDetailSearch为true时返回）：

更多关于PickResult的信息可以参考Google文档。

PlacePicker 参数

PlacePicker支持以下参数：

更多关于自动补全搜索的信息可以参考Google文档。

自定义选中地点的可视化

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

如果你不喜欢这种UI/UX，可以通过selectedPlaceWidgetBuilder覆盖默认的构建器。可以重用FloatingCard或完全根据需求构建新的小部件。它会叠加在地图上，因此建议使用Positioned小部件。

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

PlacePicker(
  apiKey: APIKeys.apiKey,
  ...
  selectedPlaceWidgetBuilder: (_, selectedPlace, state, isSearchBarFocused) {
    return isSearchBarFocused
        ? Container()
        : FloatingCard(
            bottomPosition: 0.0,
            leftPosition: 0.0,
            rightPosition: 0.0,
            width: 500,
            borderRadius: BorderRadius.circular(12.0),
            child: state == SearchingState.Searching
                ? Center(child: CircularProgressIndicator())
                : ElevatedButton(
                    onPressed: () {
                      print("do something with [selectedPlace] data");
                    },
                    child: Text("Pick Here"),
                  ),
          );
  },
  ...
),

参数说明：

自定义地图指针

默认情况下，地图指针具有简单的移动动画。你可以通过pinBuilder创建自定义指针。

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

参数说明：

更改默认FloatingCard的颜色

即使你构建了自己的预测小部件，仍然可以通过themeData更改默认小部件的样式。

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

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