Flutter地图位置选择插件google_map_location_picker_flutter的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter地图位置选择插件google_map_location_picker_flutter的使用

获取开始

获取API密钥

在以下网址获取您的API密钥: https://cloud.google.com/maps-platform/

启用API

在以下网址启用以下API: https://console.cloud.google.com/google/maps-apis/

  • 地图SDK for Android
  • 地图SDK for iOS
  • Places API
  • Geolocation API
  • Geocoding API

确保项目启用计费

安卓配置

在应用清单文件中指定您的API密钥:

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

iOS配置

在应用委托文件中指定您的API密钥(Objective-C):

#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

在应用委托文件中指定您的API密钥(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)
  }
}

还需要定义NSLocationWhenInUseUsageDescription

  <key>NSLocationWhenInUseUsageDescription</key>
  <string>这个应用需要您的位置来测试Google Maps位置选择插件的位置功能。</string>

使用方法

在pubspec.yaml文件中添加依赖项:

dependencies:
  google_maps_flutter: ^0.5.30
  google_map_location_picker_flutter: ^latest

使用示例代码:

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('地图位置选择插件示例')),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              AddressResult result = await showGoogleMapLocationPicker(
                pinWidget: Icon(Icons.location_pin, color: Colors.red, size: 55),
                pinColor: Colors.blue,
                context: context,
                addressPlaceHolder: "移动地图",
                addressTitle: "配送地址",
                apiKey: "YOUR_API_KEY_HERE",
                appBarTitle: "选择配送位置",
                confirmButtonColor: Colors.blue,
                confirmButtonText: "确认位置",
                confirmButtonTextColor: Colors.black,
                country: "sa",
                language: "ar",
                searchHint: "搜索地点",
                initialLocation: LatLng(26, 39),
                outOfBoundsMessage: "该服务目前在此地区不可用",
              );
              if (result != null) {
                print(result.address);
              }
            },
            child: Text('选择位置'),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然,以下是一个关于如何在Flutter项目中使用google_map_location_picker_flutter插件来选择地图位置的代码示例。这个插件允许用户在地图上选择一个位置,并获取该位置的经纬度信息。

首先,确保你的pubspec.yaml文件中已经添加了google_map_location_picker_flutter依赖:

dependencies:
  flutter:
    sdk: flutter
  google_map_location_picker_flutter: ^x.y.z  # 请替换为最新版本号

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

接下来,是一个完整的Flutter应用示例,展示如何使用google_map_location_picker_flutter插件:

import 'package:flutter/material.dart';
import 'package:google_map_location_picker_flutter/google_map_location_picker_flutter.dart';
import 'package:geolocator/geolocator.dart';
import 'package:geolocator_platform_interface/geolocator_platform_interface.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Map Location Picker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapPickerScreen(),
    );
  }
}

class MapPickerScreen extends StatefulWidget {
  @override
  _MapPickerScreenState createState() => _MapPickerScreenState();
}

class _MapPickerScreenState extends State<MapPickerScreen> {
  LatLng? _selectedLocation;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Map Location Picker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _selectedLocation == null
                ? Text('No location selected.')
                : Text('Selected Location: Latitude: ${_selectedLocation!.latitude}, Longitude: ${_selectedLocation!.longitude}'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                final Position? currentPosition = await Geolocator.getCurrentPosition(
                  desiredAccuracy: LocationAccuracy.high,
                  timeLimit: 5,
                );

                if (currentPosition != null) {
                  final result = await LocationPicker.pickLocation(
                    context,
                    initialPosition: LatLng(currentPosition.latitude!, currentPosition.longitude!),
                  );

                  if (result != null) {
                    setState(() {
                      _selectedLocation = result;
                    });
                  }
                } else {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                      content: Text('Failed to get current location.'),
                    ),
                  );
                }
              },
              child: Text('Pick Location'),
            ),
          ],
        ),
      ),
    );
  }
}

说明:

  1. 依赖项

    • google_map_location_picker_flutter:用于选择地图位置。
    • geolocator:用于获取当前位置(可选,但在这个示例中使用了它来获取初始位置)。
  2. 主要组件

    • MyApp:根组件,定义了应用的主题和主页。
    • MapPickerScreen:主页,包含一个文本显示选中的位置和一个按钮来触发位置选择。
    • _MapPickerScreenState:包含状态逻辑,例如选中的位置。
  3. 位置选择

    • 使用Geolocator.getCurrentPosition获取当前位置(如果用户允许访问位置)。
    • 使用LocationPicker.pickLocation显示地图选择器,并允许用户选择一个位置。
    • 如果用户选择了位置,更新状态以显示选中的位置。
  4. UI

    • 如果没有选中位置,显示“No location selected.”。
    • 如果选中了位置,显示位置的经纬度。
    • 一个按钮触发位置选择过程。

这个示例展示了如何集成和使用google_map_location_picker_flutter插件来选择地图上的位置。根据具体需求,你可以进一步定制和扩展这个示例。

回到顶部