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

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

Google Place Picker

一个用于 Flutter 应用的 Google 地图地点选择器。

简介

一个简化实现从 Google 地图选择地点并在应用中使用的 Flutter 包。

• 简单实现
• 节省开发时间
• 功能强大
• 快速部署

关注我

特性

• 在 Google 地图上选择地点
• 搜索特定位置或地址
• 使用 GPS 和当前位置
• 完全可自定义
• 处理网络连接问题
• 处理权限问题

示例预览

开始使用

获取 API Key

在 Google Cloud Console 获取 API Key。

启用 Google 地图 SDK

• 访问 Google 开发者控制台
• 选择要启用 Google 地图的项目
• 选择导航菜单并选择 “Google Maps”
• 选择 “APIs” 下的 “附加 API” 部分
• 为 Android 启用 “Maps SDK for Android”
• 为 iOS 启用 “Maps SDK for iOS”
• 确保启用的 API 在 “已启用的 API” 部分中

更多详情，请参阅 Google Maps 平台入门指南。

Android 设置

1. 在 android/app/build.gradle 文件中设置 minSdkVersion：

android {
    defaultConfig {
        minSdkVersion 20
    }
}

这表示应用仅支持 Android SDK 20 或更高版本。

1. 确保在 android/app/build.gradle 文件中设置 compileSdkVersion（以您的偏好为准）。我的设置为 31：

android {
 compileSdkVersion 31

 ...
}

1. 在应用程序清单文件 android/app/src/main/AndroidManifest.xml 中指定 API Key：

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

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

android.useAndroidX=true
android.enableJetifier=true

1. 确保将所有 android. 依赖项替换为其 AndroidX 对应项（完整的列表可以在 Android 迁移指南 中找到）。

iOS 设置

要设置，请在应用程序代理 ios/Runner/AppDelegate.m 中指定 API Key：

#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 Key：

import UIKit
import Flutter
import GoogleMaps
@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: 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>

此外，您需要在 XCode 项目中添加 <code>Background Modes</code> 功能，并选择 <code>Location Updates</code>。在项目的 <code>Info.plist</code> 文件中添加以下键值对以启用嵌入式视图预览：

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

使用方法

基本用法

您可以使用 GooglePlacePicker 通过导航到新页面或将其作为任何小部件的子组件。当用户在地图上选择一个地点时，它会返回一个包含 CompleteAddress 类型信息的结果到 getAddress 方法。

import 'package:flutter/material.dart';
import 'package:google_place_picker/google_place_picker.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Google Place Picker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Google Place Picker Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String address = '';
  String city = '';
  String latitude = '';
  String longitude = '';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        elevation: 0.0,
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Address: $address',
            ),
            Text(
              'City: $city',
            ),
            Text(
              'Latitude: $latitude',
            ),
            Text(
              'Longitude: $longitude',
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => GooglePlacePicker(
                      apiKey: 'YOUR_API_KEY',
                      getAddress: (completeAddress) {
                        setState(() {
                          address = completeAddress.completeAddress.toString();
                          city = completeAddress.city.toString();
                          latitude = completeAddress.position!.latitude.toString();
                          longitude = completeAddress.position!.longitude.toString();
                        });
                      },
                    ),
                  ),
                );
              },
              child: const Text('Pick a Place on Google Maps'),
            ),
          ],
        ),
      ),
    );
  }
}