Flutter地图选点插件google_maps_pick_place的使用

Flutter 地图选点插件 google_maps_pick_place 的使用

Google Maps Pick Place

这是一个用于从谷歌地图上选择地点并使用所选数据的应用程序的 pub.dev 插件。

• 🌟 简单易用 🌟
• 🚀 节省大量时间 🚀
• ✨ 像魔法一样 ✨

关注我

LinkedIn | GitHub | GitHub 仓库 | Pub

特性

• 从谷歌地图上选择一个地点
• 搜索特定地点
• 使用 GPS 和当前位置
• 新的可自定义的设计
• 处理断开连接的情况
• 处理拒绝 GPS 访问的情况

预览

开始使用

获取 API 密钥

访问 https://cloud.google.com/maps-platform/ 获取 API 密钥。

启用 Google Map SDK

1. 打开 Google 开发者控制台
2. 选择你要启用 Google Maps 的项目。
3. 选择导航菜单中的 “Google Maps”。
4. 选择 “APIs”。
5. 若要为 Android 启用 Google Maps，在 “附加 API” 部分选择 “Maps SDK for Android” 并点击 “启用”。
6. 若要为 iOS 启用 Google Maps，在 “附加 API” 部分选择 “Maps SDK for iOS” 并点击 “启用”。
7. 确保已启用的 API 在 “已启用的 API” 部分。

更多详情请参阅 Google Maps Platform 入门指南。

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 密钥：

<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 迁移指南 中找到）。

Hybrid Composition

要使用 Hybrid Composition 在 Android 上渲染 GoogleMap 小部件，请将 AndroidGoogleMapsFlutter.useAndroidViewSurface 设置为 true：

if (defaultTargetPlatform == TargetPlatform.android) {
  AndroidGoogleMapsFlutter.useAndroidViewSurface = true;
}

iOS 设置

要在 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 代码中，指定你的 API 密钥在应用代理 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 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 推入一个新的页面，或者将其作为任何小部件的子节点来使用 GoogleMapsPickPlace。当用户在地图上选择一个地点时，它会返回结果给 getResult 方法，类型为 FullAddress。

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

// ...
Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => GoogleMapsPickPlace(
          apiKey: "YOU GOOGLE MAPS API KEY",
          getResult: (FullAddress result) {
            print('${result.address}');
            /// 不要使用 Navigator.of(context).pop()，因为它已在方法中构建
          },
        ),
      ),
    );

注意事项

搜索地点的功能需要付费的 Google Maps API 密钥。使用免费密钥时，地图和选择地点的功能可以正常工作且不会出现错误，但搜索地点的功能将无法使用。

Google Maps Pick Place 属性

FullAddress 属性

许可证

MIT 许可证

示例代码

以下是使用 google_maps_pick_place 插件的基本示例代码：

import 'package:flutter/material.dart';
import 'package:google_maps_pick_place/google_maps_pick_place.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 Maps Pick Place Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Google Maps Pick Place 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 = "";
  double latitude = 0.0;
  double longitude = 0.0;

  [@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: [
            Text(
              'Address: $address',
            ),
            Text(
              'Latitude: $latitude ',
            ),
            Text(
              'Longitude: $longitude',
            ),
            RaisedButton(
              color: Colors.blue,
              elevation: 0.0,
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => GoogleMapsPickPlace(
                      apiKey: 'YOUR_GOOGLE_MAPS_API_KEY',
                      getResult: (FullAddress fullAddress) {
                        setState(() {
                          address = fullAddress.address.toString();
                          latitude = fullAddress.position!.latitude;
                          longitude = fullAddress.position!.longitude;
                        });
                      },
                    ),
                  ),
                );
              },
              child: const Text('Pick Place'),
            ),
          ],
        ),
      ),
    );
  }
}