Flutter地点选择插件google_places_picker的使用

Google Places Autocomplete for Flutter 是一个用于在Flutter应用中实现地点选择功能的插件。本文将详细介绍如何使用 google_places_picker 插件，并提供一个完整的示例 demo。

Getting Started

Setting up

1. 在 main.dart 文件的 initState 方法中运行 initialize 方法（或任何只调用一次的地方），并传入您的 API 密钥作为参数：

import 'package:google_places_picker/google_places_picker.dart';

PluginGooglePlacePicker.initialize(
      androidApiKey: "YOUR_ANDROID_API_KEY",
      iosApiKey: "YOUR_IOS_API_KEY",
);

Usage

您可以通过 showAutocomplete 方法使用该插件，该方法接受一个 PlaceAutocompleteMode 参数来确定在 Android 上显示全屏控件还是覆盖控件（在 iOS 上没有效果）。它返回一个包含以下属性的 Place 对象：

• name
• id
• address
• latitude
• longitude

完整示例 Demo

下面是一个完整的示例代码，展示了如何在 Flutter 应用中集成 google_places_picker 插件。

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _placeName = 'Unknown';

  @override
  void initState() {
    super.initState();
    PluginGooglePlacePicker.initialize(
      androidApiKey: "YOUR_ANDROID_API_KEY",
      iosApiKey: "YOUR_IOS_API_KEY",
    );
  }

  Future<void> _showAutocomplete() async {
    String placeName;
    var locationBias = LocationBias()
      ..northEastLat = 20.0
      ..northEastLng = 20.0
      ..southWestLat = 0.0
      ..southWestLng = 0.0;

    var locationRestriction = LocationRestriction()
      ..northEastLat = 20.0
      ..northEastLng = 20.0
      ..southWestLng = 0.0
      ..southWestLat = 0.0;

    var country = "US";

    try {
      var place = await PluginGooglePlacePicker.showAutocomplete(
          mode: PlaceAutocompleteMode.MODE_OVERLAY,
          countryCode: country,
          restriction: locationRestriction,
          typeFilter: TypeFilter.ESTABLISHMENT);
      placeName = place?.name ?? "Null place name!";
    } catch (e) {
      print("Error: $e");
      placeName = "Error occurred";
    }

    if (!mounted) return;

    setState(() {
      _placeName = placeName;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Place picker example app'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: _showAutocomplete,
                child: Text("Show autocomplete"),
              ),
              SizedBox(height: 20),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text("Place name: "),
                  Text(_placeName),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

注意事项

1. API Key: 确保替换 "YOUR_ANDROID_API_KEY" 和 "YOUR_IOS_API_KEY" 为实际的 Google Places API 密钥。
2. 权限: 确保在 AndroidManifest.xml 和 Info.plist 中添加必要的权限和配置。
3. 依赖管理: 在 pubspec.yaml 文件中添加 google_places_picker 依赖：

   dependencies:
     google_places_picker: ^latest_version