Flutter地点选择插件google_maps_place_picker的使用

Flutter地点选择插件google_maps_place_picker的使用

预览

支持

如果该插件对您有用或节省了您的时间，请不要犹豫为我买杯咖啡！😉
更多咖啡，更多的未来有用项目。

获取开始

1. 在https://cloud.google.com/maps-platform/获取API密钥。
2. 启用Google Map SDK以支持每个平台。
3. 您可以在此处找到有关如何开始使用Google Maps平台的详细步骤：https://developers.google.com/maps/gmp-get-started。

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

1. 确保在android/app/build.gradle文件中的compileSdkVersion设置为28：

android {
 compileSdkVersion 28

 ...
}

1. 将所有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代码中，在应用程序代理文件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)
  }
}

在iOS上，您需要向Info.plist文件中添加以下条目（位于ios/Runner下），以便访问设备的位置。

打开Info.plist文件并添加以下内容：

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

此外，您需要将Background Modes功能添加到您的XCode项目中（项目 > 签名和能力 > "+ 能力"按钮）并选择Location Updates。

通过在应用的Info.plist文件中添加一个布尔属性来启用嵌入视图预览，属性键为io.flutter.embedded_views_preview，值为YES。

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

使用

基本使用

您可以使用Navigator导航到新页面，或者将其作为任何小部件的子元素使用。当用户在地图上选择一个地点时，它将通过PickResult类型返回结果到onPlacePicked回调。

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

PlacePicker

自定义所选地点可视化

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

但是，如果您不喜欢这种UI/UX，可以通过selectedPlaceWidgetBuilder重写构建器。您可以重复使用FloatingCard小部件，使其浮动在屏幕上，或者根据需要构建全新的小部件。它堆叠在地图上，因此您可能需要使用Positioned小部件。

注意： 使用此定制不会调用[onPlacePicked]回调，因为它会覆盖默认的浮动卡片上的“选择此处”按钮。

PlacePicker(
  apiKey: APIKeys.apiKey,
  ...
  selectedPlaceWidgetBuilder: (_, selectedPlace, state, isSearchBarFocused) {
    return isSearchBarFocused
        ? Container()
        // 使用FloatingCard或创建自己的小部件。
        : FloatingCard(
            bottomPosition: 0.0,    // MediaQuery.of(context)将导致重建。请参阅MediaQuery文档了解更多信息。
            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: (context, state) {
    if (state == PinState.Idle) {
      return Icon(Icons.favorite_border);
    } else {
      return AnimatedIcon(...);
    }
  },
  ...
),

更改默认FloatingCard的颜色

虽然您可以构建自己的预测磁贴，但您仍然可以使用themeData更改默认磁贴的样式，如下所示：

// Light Theme
final ThemeData lightTheme = ThemeData.light().copyWith(
  // FloatingCard的背景颜色
  cardColor: Colors.white,
  buttonTheme: ButtonThemeData(
    // “选择此处”按钮的颜色
    buttonColor: Colors.black,
    textTheme: ButtonTextTheme.primary,
  ),
);

// Dark Theme
final ThemeData darkTheme = ThemeData.dark().copyWith(
  // FloatingCard的背景颜色
  cardColor: Colors.grey,
  buttonTheme: ButtonThemeData(
    // “选择此处”按钮的颜色
    buttonColor: Colors.yellow,
    textTheme: ButtonTextTheme.primary,
  ),
);