Flutter地点选择插件google_map_place_picker的使用

Flutter地点选择插件google_map_place_picker的使用

示例用法

首先，在您的代码中导入该包：

import 'package:place_picker/place_picker.dart';

接下来，创建一个方法，如以下所示。LocationResult 将返回所选位置的名称和经纬度。您可以根据需要处理结果。可以传递一个可选的 LatLng displayLocation 来显示特定的位置。这在您希望地图显示之前选择的位置时非常有用。

void showPlacePicker() async {
    LocationResult result = await Navigator.of(context).push(MaterialPageRoute(
                    builder: (context) => MapLocationPicker(
                          "ADD-API-KEY-HERE",
                          languageCode: "en_us",
                          autoCompleteRegion: "in",
                          autoCompleteComponents: "country:in",
                          autoTheme: true,
                        )));
}

完整示例Demo

以下是完整的示例代码，展示了如何在Flutter应用中使用 google_map_place_picker 插件来选择地点。

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

void main() {
  runApp(
    const MaterialApp(
      home: MyApp(),
      debugShowCheckedModeBanner: false,
    ),
  );
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final TextEditingController _controller = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Google Map Location Picker'),
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text("Pick a location"),
          onPressed: () async {
            LocationResult? result = await Navigator.of(context).push(
                MaterialPageRoute(
                    builder: (context) => MapLocationPicker("ADD-API-KEY-HERE",
                        languageCode: "en_us",
                        autoCompleteRegion: "in",
                        autoCompleteComponents: "country:in",
                        autoTheme: true,
                        pinColor: Colors.amber[900])));

            // 处理结果
            if (result != null) {
              print(result.formattedAddress); // 打印选定地点的详细地址
            } else {
              print("No location selected");
            }
          },
        ),
      ),
    );
  }
}

更多关于Flutter地点选择插件google_map_place_picker的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter地点选择插件google_map_place_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


google_map_place_picker 是一个用于在 Flutter 应用中选择地点的插件。它集成了 Google Maps 和 Google Places API，允许用户在地图上选择一个地点，并返回该地点的详细信息。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 google_map_place_picker 依赖：

dependencies:
  flutter:
    sdk: flutter
  google_map_place_picker: ^2.1.0+2

然后运行 flutter pub get 来安装依赖。

获取 Google API 密钥

在使用 google_map_place_picker 之前，你需要获取 Google Maps API 密钥。你可以在 Google Cloud Console 中创建一个项目，并启用 Google Maps JavaScript API 和 Google Places API。然后生成一个 API 密钥。

配置 Android 和 iOS

Android

在 android/app/src/main/AndroidManifest.xml 文件中添加以下代码：

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application>
        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="YOUR_API_KEY"/>
    </application>
</manifest>

iOS

在 ios/Runner/AppDelegate.swift 文件中添加以下代码：

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_API_KEY")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

使用 google_map_place_picker

以下是一个简单的示例，展示如何使用 google_map_place_picker 选择地点：

import 'package:flutter/material.dart';
import 'package:google_map_place_picker/google_map_place_picker.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class PlacePickerExample extends StatefulWidget {
  [@override](/user/override)
  _PlacePickerExampleState createState() => _PlacePickerExampleState();
}

class _PlacePickerExampleState extends State<PlacePickerExample> {
  PickResult selectedPlace;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Place Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            if (selectedPlace != null)
              Text('Selected Place: ${selectedPlace.formattedAddress}'),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => PlacePicker(
                      apiKey: 'YOUR_API_KEY',
                      onPlacePicked: (result) {
                        setState(() {
                          selectedPlace = result;
                        });
                        Navigator.of(context).pop();
                      },
                      initialPosition: LatLng(37.43296265331129, -122.08832357078792),
                      useCurrentLocation: true,
                    ),
                  ),
                );
              },
              child: Text('Pick a Place'),
            ),
          ],
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: PlacePickerExample(),
));
回到顶部