搜索插件、代码仓与 APP 分类

插件详情v0.0.10

location_map_picker

从地图上选择位置,并在谷歌地图中搜索任何地点,获取输出以及地点名称和LatLng,使用谷歌地图和Geolocator。

近 30 天下载
17
喜欢数
10
Pub 分数
75

安装插件

flutter pub add location_map_picker

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包,允许用户直接在应用内从 Google 地图中选择位置。它集成了 Google 地图与地理定位服务,使用户能够搜索地点并获取精确信息,例如地点名称和 LatLng 坐标。基于 Geolocator 插件构建,支持无缝的地图交互和地址解析。非常适合需要通过直观地图界面进行精准位置输入的应用。

适合场景

  • 基于地图的位置选择
  • 地址搜索带自动补全
  • 通过 Google 地图进行地理编码
  • 表单中的位置共享
  • 实时位置跟踪
  • 带有位置输入的用户引导

主要特点

  • 交互式 Google 地图集成
  • 地点名称和LatLng输出
  • 可搜索的位置输入
  • 基于定位器的地理编码
  • 地图交互的简单 API
  • 移动设备的响应式用户界面

适合对象

  • 旅行和配送应用
  • 事件注册平台
  • 配送和物流系统
  • 带有位置标记的社交媒体
  • 用户资料设置位置
  • 需要精确地理位置数据的应用程序

使用建议

  • 需要互联网访问权限以使用 Google 地图
  • 需要 Google 地图的 API 密钥
  • 仅限 Android 和 iOS(无 Web 支持)
  • 依赖于 Geolocator 插件
  • 对低端设备可能产生的性能影响
  • 位置数据的隐私考虑

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

location_map_picker:

widget to pick a location on a map with google map.

# 👨‍💻 Developed by:

profile

Nasr Al-Rahbi @abom_me

👨🏻‍💻 Find me in :

Twitter Instagram LinkedIn Stack Overflow



  • Compatibility with Geolocator
  • Use of Google map APIs
Android iOS Flutter Web
Support SDK 20+ iOS 9+ Not yet

Location picker using the official google_maps_flutter.

Setup

Pubspec changes:

      dependencies:
        map_location_picker: ^0.0.7

Sample example:

import 'package:location_map_picker/location_map_picker.dart';
MapPicker(
apiKey: "YOUR_API_KEY",
onPin: (PinData? result) {
...
},
);

Getting Started

For more details, see Getting started with Google Maps Platform.

Android
  1. Set the minSdkVersion in android/app/build.gradle:
android {
    defaultConfig {
        minSdkVersion 20
    }
}

This means that app will only be available for users that run Android SDK 20 or higher.

  1. Specify your API key in the application manifest android/app/src/main/AndroidManifest.xml:
<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR KEY HERE"/>
Hybrid Composition

To use Hybrid Composition to render the GoogleMap widget on Android, set AndroidGoogleMapsFlutter.useAndroidViewSurface to true.

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

To set up, specify your API key in the application delegate ios/Runner/AppDelegate.m:

#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

Or in your swift code, specify your API key in the application delegate 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)
  }
}
Note

The following permissions are not required to use Google Maps Android API v2, but are recommended.

android.permission.ACCESS_COARSE_LOCATION Allows the API to use WiFi or mobile cell data (or both) to determine the device's location. The API returns the location with an accuracy approximately equivalent to a city block.

android.permission.ACCESS_FINE_LOCATION Allows the API to determine as precise a location as possible from the available location providers, including the Global Positioning System (GPS) as well as WiFi and mobile cell data.


You must also explicitly declare that your app uses the android.hardware.location.network or android.hardware.location.gps hardware features if your app targets Android 5.0 (API level 21) or higher and uses the ACCESS_COARSE_LOCATION or ACCESS_FINE_LOCATION permission in order to receive location updates from the network or a GPS, respectively.

<uses-feature android:name="android.hardware.location.network" android:required="false" />
<uses-feature android:name="android.hardware.location.gps" android:required="false"  />

The following permissions are defined in the package manifest, and are automatically merged into your app's manifest at build time. You don't need to add them explicitly to your manifest:

android.permission.INTERNET Used by the API to download map tiles from Google Maps servers.

android.permission.ACCESS_NETWORK_STATE Allows the API to check the connection status in order to determine whether data can be downloaded.

See the example directory for a complete sample app.

Parameters of the MapPicker
/// Here add the starting location, this location will appear directly when entering the widget
  /// You can leave it blank and it will use a default location

   LatLng? startLocation;


  /// Here, type the text that appears below before choosing a location, you can leave it blank

String? inputText;


  /// Here is the widget that will appear in the submit button
  /// You can leave it blank and it will use the default send icon

  Widget? sendBtnIcon = const Icon(Icons.send);


  ///Here is the text color of the text box, it is black by default
  Color? textInputColor;



  /// Here is the icon that appears next to the text box for the position name, at the bottom
  Widget? inputIcon;



  /// This String is required and mandatory, here  type your API key from Google Cloud
 
  final String apiKey;


  /// Here is the text that will appear in the search box at the top
  /// default phrase (Search For A Place)

   String? searchBoxHintText;


  /// Here is the language of the map and the name of the places, just type the language code
  /// For example: for Arabic (ar) for English (en)
  /// You can leave it blank and it will be in English by default
  String? mapLanguage;


  ///Here is type of the map, if it is normal, satellite, etc
  MapType? mapType;


  /// Here comes the data after selecting the location, including the name of the place and its LatLng
  final void Function(PinData pinData) onPin;

Real Example:

Video Example

👨🏻‍💻 Follow me :

Twitter

Instagram

LinkedIn

Stack Overflow

所属分类

依赖

依赖清单 5 项

源码仓库

使用此插件的项目

暂无相关数据。