Flutter地理位置选择插件google_maps_location_picker的使用

Flutter地理位置选择插件google_maps_location_picker的使用

预览

注意：此预览展示了新功能：限制选择区域为圆形。此功能可以禁用。

支持

如果该包对您有用或节省了您的时间，请不要犹豫买杯咖啡支持原作者！ 更多咖啡意味着未来能做出更多有用的项目。

获取开始

1. 在https://cloud.google.com/maps-platform/获取API密钥。
2. 在Google开发者控制台中启用Google地图SDK。
   • 打开Google开发者控制台
   • 选择您要启用Google Maps的项目。
   • 选择导航菜单并选择“Google Maps”。
   • 选择“APIs”。
   • 要为Android启用Google Maps，请在“附加API”部分选择“Maps SDK for Android”，然后选择“启用”。
   • 要为iOS启用Google Maps，请在“附加API”部分选择“Maps SDK for iOS”，然后选择“启用”。
   • 同时启用“Geocoding API”、“Geolocation API”和“Places API”。
   • 确保已启用的API位于“已启用API”部分。
   • 为所有API生成API密钥。

您还可以在此处找到详细的入门指南： 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 ANDROID KEY HERE"/>

注意：从版本3.0.0开始，geolocator插件切换到AndroidX版本的Android支持库。这意味着您需要确保您的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 IOS 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 IOS KEY HERE")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

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

简单打开您的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项目（项目 > 目标 > Runner > 签名和能力 > "+"按钮 > “后台模式”），并在添加后选中“位置更新”。

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

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

如果您想在模拟器上运行您的应用，请确保在模拟器菜单中设置一个位置：

使用

首先，建议在Android上启用混合组合以避免地图重绘时出现闪烁问题：

void main() {
  if(Platform.isAndroid) {
    AndroidGoogleMapsFlutter.useAndroidViewSurface = true;
  }
  return runApp(MyApp());
}

现在，您可以使用LocationPicker通过Navigator推送至新页面，或者作为任何小部件的子级使用。当用户在地图上选择一个地点时，它会返回带有PickResult类型的onPlacePicked结果。

import 'package:flutter/material.dart';
import 'package:google_maps_place_picker_mb/google_maps_location_picker.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'dart:io' show Platform;

// ...

Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => LocationPicker(
          apiKey: Platform.isAndroid
              ? "YOUR ANDROID API KEY"
              : "YOUR IOS API KEY"
          onPlacePicked: (result) { 
            print(result.address); 
            Navigator.of(context).pop();
          },
          initialPosition: HomePage.kInitialPosition,
          useCurrentLocation: true,
          resizeToAvoidBottomInset: false, // 只在页面模式下工作，减少闪烁，移除可能会导致错误偏移
        ),
      ),
    );

PickResult

LocationPicker

• MB 版本专属，目前

自定义选择地点的可视化

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

然而，如果您不喜欢这种UI/UX，只需使用selectedPlaceWidgetBuilder覆盖构建器。FloatingCard小部件可以重复使用，悬浮在屏幕上，或者根据您的需求构建全新的小部件。它堆叠在地图之上，因此您可能想要使用Positioned小部件。

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

...
LocationPicker(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创建自己的标记小部件。

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

添加自定义介绍模态框

默认情况下，地图会立即显示。您可能希望在首次启动应用程序时显示一个带有说明的漂亮定制覆盖模态框。在这种情况下，这个自定义小部件构建器是有意义的，因为它为您提供了最大的自由度，以避免人们认为他们打开了Google Maps。

LocationPicker(apiKey: APIKeys.apiKey,
            ...
            introModalWidgetBuilder: (context,  close) {
              return Positioned(
                top: MediaQuery.of(context).size.height * 0.35,
                right: MediaQuery.of(context).size.width * 0.15,
                left: MediaQuery.of(context).size.width * 0.15,
                child: Container(
                  width: MediaQuery.of(context).size.width * 0.7,
                  child: Material(
                    type: MaterialType.canvas,
                    color: Theme.of(context).cardColor,
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(12.0), 
                    ),
                    elevation: 4.0,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(12.0),
                      child: Container(
                        padding: EdgeInsets.all(8.0),
                        child: Column(
                          children: [
                            SizedBox.fromSize(size: new Size(0, 10)),
                            Text("Please select your preferred address.",
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                              )
                            ),
                            SizedBox.fromSize(size: new Size(0, 10)),
                            SizedBox.fromSize(
                              size: Size(MediaQuery.of(context).size.width * 0.6, 56), // 按钮宽度和高度
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(10.0),
                                child: Material(
                                  child: InkWell(
                                    overlayColor: MaterialStateColor.resolveWith(
                                      (states) => Colors.blueAccent
                                    ),
                                    onTap: close,
                                    child: Row(
                                      mainAxisAlignment: MainAxisAlignment.center,
                                      children: [
                                        Icon(Icons.check_sharp, color: Colors.blueAccent),
                                        SizedBox.fromSize(size: new Size(10, 0)),
                                        Text("OK",
                                          style: TextStyle(
                                            color: Colors.blueAccent
                                          )
                                        )
                                      ],
                                    ) 
                                  ),
                                ),
                              ),
                            )
                          ]
                        )
                      ),
                    ),
                  ),
                )
              );
            },
            ...                        
          ),
...

更改默认FloatingCard的颜色

虽然您可以构建自己的预测小部件，但您仍然可以通过主题数据更改默认小部件的样式，如下所示：

// 浅色主题
final ThemeData lightTheme = ThemeData.light().copyWith(
  // FloatingCard的背景颜色
  cardColor: Colors.white,
);

// 深色主题
final ThemeData darkTheme = ThemeData.dark().copyWith(
  // FloatingCard的背景颜色
  cardColor: Colors.grey,
);