Flutter 的谷歌地图地点选择器

Google Maps Place Picker

一个 Flutter 插件，它提供使用谷歌地图 widget 的“地点选择”。

该项目依赖以下包。

使用 Flutter 官方 google_maps_flutter 进行地图绘制
使用 Baseflow 的 geolocator 获取当前位置
使用 hadrienlejard 的 google_maps_webservice 进行地点和地理编码 API
使用 kevmoo 的 tuple 进行构建

支持

如果该软件包对您有帮助或节省了您的时间，请随时给我买杯咖啡！ ;)
我获得的咖啡因越多，未来就能做出越有用的项目。

入门

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

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 插件已切换到 Android Support Libraries 的 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 对应项（完整列表可在 https://developer.android.com.cn/jetpack/androidx/migrate 找到）。

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 文件添加一个布尔属性来选择加入嵌入式视图预览
键为 io.flutter.embedded_views_preview，值为 YES。

用法

基本用法

您可以使用 Navigator 推送到新页面来使用 PlacePicker。
当用户在地图上选择一个地点时，它将返回结果 (PickResult)。

Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => PlacePicker(
          apiKey: APIKeys.apiKey,   // Put YOUR OWN KEY here.
          onPlacePicked: (result) { 
            print(result.address); 
            Navigator.of(context).pop();
          },
          initialPosition: HomePage.kInitialPosition,
          useCurrentLocation: true,
        ),
      ),
    );

PickResult

在 Google 上获取结果的 更多信息。

PlacePicker

自定义已选地点可视化

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

但是，如果您不喜欢这种 UI/UX，只需使用 'selectedPlaceWidgetBuilder' 覆盖它即可。FlocatingCard 小部件可以重复使用，它可以在屏幕周围浮动，或者您可以完全构建一个新小部件，随心所欲。它与地图堆叠在一起，所以您可能想使用 Positioned 小部件。

请注意，使用此自定义将不会调用 [onPlacePicked] 回调，因为它将覆盖浮动卡上的默认“在此处选择”按钮

...
PlacePicker(apiKey: APIKeys.apiKey,
            ...
            selectedPlaceWidgetBuilder: (_, selectedPlace, state, isSearchBarFocused) {
              return isSearchBarFocused
                  ? Container()
                  // Use FloatingCard or just create your own Widget.
                  : FloatingCard(
                      bottomPosition: MediaQuery.of(context).size.height * 0.05,
                      leftPosition: MediaQuery.of(context).size.width * 0.05,
                      width: MediaQuery.of(context).size.width * 0.9,
                      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: (context, state) {
                  if (state == PinState.Idle) {
                    return Icon(Icons.favorite_border);
                  } else {
                    return AnimatedIcon(.....);
                  }
                },
            ...                        
          ),
...

更改默认 FloatingCard（预测图块）的颜色

虽然您可以构建自己的预测列表项，但仍可以使用下面的 ThemeData 来更改默认列表项的样式。

theme: ThemeData.dark().copyWith(
        cardColor: Colors.grey,                  // Background color of the FloatingCard
        buttonTheme: ButtonThemeData(
          buttonColor: Colors.yellow,            // Select here's button color
          textTheme: ButtonTextTheme.primary,    // Applying this will automatically change text color based on buttonColor. (Button color is dark ? white / is light ? black)
        ),
        textTheme: TextTheme(
          body1: TextStyle(color: Colors.white), // This will change the text color of FloatingCard
        ),
      ),

GitHub

https://github.com/fysoul17/google_maps_place_picker