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

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

插件介绍

bound_location_picker 是一个由官方 google_maps_flutter 插件创建的Flutter包，可以帮助你在边界内选择位置。该插件支持Android、iOS和Web平台。

主要功能

• 在多边形边界内选择位置
• 在圆形边界内选择位置

开发者信息

该插件由@Hasan开发。

支持版本

示例代码

class MyApp extends StatefulWidget {
  const MyApp({super.key});

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: BoundLocationPicker(
          initialCameraPosition: const LatLng(24.540725, 89.631088),
          onPickedLocation: (LatLng? location) {
            ///TODO do something using location
          },
          onLocationUpdateListener: (LatLng? location) {
            ///TODO do something with current location
          },
          locationPickerImage: const AssetImage("assets/pin_point.png"),
          circleBoundary: CircleBoundary(radius: 800),
          enablePickedButton: true,
        ),
      ),
    );
  }
}

使用说明

1 添加依赖 在pubspec.yaml文件中添加bound_location_picker作为依赖项。

dependencies:
  flutter:
    sdk: flutter

  bound_location_picker: ^update_version

确保执行flutter pub get以安装依赖项。

Android配置

1 设置最小SDK版本 在android/app/build.gradle中设置minSdkVersion。

android {
    defaultConfig {
        minSdkVersion 20
    }
}

这意味着应用仅适用于运行Android SDK 20或更高版本的用户。

1 指定API密钥 在android/app/src/main/AndroidManifest.xml中指定API密钥。

<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR KEY HERE"/&gt;
</manifest>

iOS配置

1 指定API密钥 在ios/Runner/AppDelegate.m中指定API密钥。

#include "AppDelegate.h"
#include "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密钥。

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)
  }
}

Web配置

1 修改web/index.html文件 将Google Maps JS SDK包含到您的Flutter Web应用程序的web/index.html文件中。 请参阅google_maps_flutter_web README获取如何准备您的应用以在Web上使用Google Maps的最新信息。

示例代码

class MyApp extends StatefulWidget {
  const MyApp({super.key});

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: BoundLocationPicker(
          initialCameraPosition: const LatLng(24.540725, 89.631088),
          onPickedLocation: (LatLng? location) {
            ///TODO do something using location
          },
          onLocationUpdateListener: (LatLng? location) {
            ///TODO do something with current location
          },
          locationPickerImage: const AssetImage("assets/pin_point.png"),
          circleBoundary: CircleBoundary(radius: 800),
          enablePickedButton: true,
        ),
      ),
    );
  }
}