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

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

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

插件概述

map_location_picker 是一个用于在Flutter应用程序中实现地图位置选择功能的插件。它支持通过Google Maps API进行位置选择和地址解析，并且提供了对Android、iOS和Web平台的支持。

功能特性

  • 与Geolocator兼容：可以方便地集成地理位置服务。
  • 使用Google Maps API：提供丰富的地图交互体验。
  • 支持Flutter Web：不仅限于移动端，也适用于Web端开发。
  • 高度自定义：所有新特性都在MapLocationPicker类中进行了封装，便于开发者根据需求调整。

支持平台及版本要求

平台 版本要求
Android SDK 20+
iOS iOS 11+
Web 同步Flutter官方支持

快速上手指南

添加依赖项

首先，在项目的pubspec.yaml文件中添加map_location_picker作为依赖：

dependencies:
  map_location_picker: ^1.2.7

然后运行flutter pub get来安装该包。

获取API Key

前往Google Cloud Console获取API Key，并确保启用了以下API：

  • Maps SDK for Android
  • Maps SDK for iOS
  • Places API
  • Geocoding API
  • Maps JavaScript API

同时，记得为项目启用计费功能。

配置平台特定设置

Android配置

  1. 在android/app/build.gradle中设置最低SDK版本为20或更高。
  2. 在android/app/src/main/AndroidManifest.xml中声明API Key。
  3. 如果需要使用混合渲染模式，请设置AndroidGoogleMapsFlutter.useAndroidViewSurface = true;。

iOS配置

在ios/Runner/AppDelegate.m或AppDelegate.swift中引入Google Maps SDK并提供API Key。

Web配置

编辑web/index.html文件，在<head>标签内加载Google Maps JavaScript API。

使用示例代码

下面是一个完整的示例程序，展示了如何在Flutter应用中使用map_location_picker插件来选择和显示位置信息。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:map_location_picker/map_location_picker.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String address = "null";
  String autocompletePlace = "null";
  Prediction? initialValue;

  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('location picker'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          // 地点自动补全输入框
          PlacesAutocomplete(
            searchController: _controller,
            apiKey: YOUR_API_KEY, // 替换为你的API Key
            mounted: mounted,
            hideBackButton: true,
            debounceDuration: const Duration(milliseconds: 500),
            onGetDetailsByPlaceId: (PlacesDetailsResponse? result) {
              if (result != null) {
                setState(() {
                  autocompletePlace = result.result.formattedAddress ?? "";
                });
              }
            },
          ),
          OutlinedButton(
            child: Text('show dialog'.toUpperCase()),
            onPressed: () {
              showDialog(
                context: context,
                builder: (context) {
                  return AlertDialog(
                    title: const Text('Example'),
                    content: PlacesAutocomplete(
                      apiKey: YOUR_API_KEY, // 替换为你的API Key
                      searchHintText: "Search for a place",
                      mounted: mounted,
                      hideBackButton: true,
                      initialValue: initialValue,
                      debounceDuration: const Duration(milliseconds: 500),
                      onSelected: (value) {
                        setState(() {
                          autocompletePlace =
                              value.structuredFormatting?.mainText ?? "";
                          initialValue = value;
                        });
                      },
                      onGetDetailsByPlaceId: (value) {
                        setState(() {
                          address = value?.result.formattedAddress ?? "";
                        });
                      },
                    ),
                    actions: <Widget>[
                      TextButton(
                        child: const Text('Done'),
                        onPressed: () => Navigator.of(context).pop(),
                      ),
                    ],
                  );
                },
              );
            },
          ),
          const Spacer(),
          const Padding(
            padding: EdgeInsets.all(8.0),
            child: Text(
              "Google Map Location Picker\nMade By Arvind 😃 with Flutter 🚀",
              textAlign: TextAlign.center,
              textScaleFactor: 1.2,
              style: TextStyle(
                color: Colors.grey,
              ),
            ),
          ),
          TextButton(
            onPressed: () => Clipboard.setData(
              const ClipboardData(text: "https://www.mohesu.com"),
            ).then(
              (value) => ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(
                  content: Text("Copied to Clipboard"),
                ),
              ),
            ),
            child: const Text("https://www.mohesu.com"),
          ),
          const Spacer(),
          Center(
            child: ElevatedButton(
              child: const Text('Pick location'),
              onPressed: () async {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) {
                      return MapLocationPicker(
                        apiKey: YOUR_API_KEY, // 替换为你的API Key
                        popOnNextButtonTaped: true,
                        currentLatLng: const LatLng(29.146727, 76.464895),
                        debounceDuration: const Duration(milliseconds: 500),
                        onNext: (GeocodingResult? result) {
                          if (result != null) {
                            setState(() {
                              address = result.formattedAddress ?? "";
                            });
                          }
                        },
                        onSuggestionSelected: (PlacesDetailsResponse? result) {
                          if (result != null) {
                            setState(() {
                              autocompletePlace =
                                  result.result.formattedAddress ?? "";
                            });
                          }
                        },
                      );
                    },
                  ),
                );
              },
            ),
          ),
          const Spacer(),
          ListTile(
            title: Text("Geocoded Address: $address"),
          ),
          ListTile(
            title: Text("Autocomplete Address: $autocompletePlace"),
          ),
          const Spacer(
            flex: 3,
          ),
        ],
      ),
    );
  }
}

请注意将示例中的YOUR_API_KEY替换为你从Google Cloud Console获取的实际API Key。

以上就是关于map_location_picker插件的基本介绍和使用方法。希望这些信息能够帮助你快速集成此功能到自己的Flutter项目中！如果你有任何疑问或者遇到问题，欢迎随时提问。


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用map_location_picker插件来实现地图位置选择的示例代码。这个插件允许用户在地图上选择一个位置，并返回该位置的经纬度等信息。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  map_location_picker: ^2.0.0  # 请检查最新版本号

2. 导入包

在你的Dart文件中导入map_location_picker包：

import 'package:map_location_picker/map_location_picker.dart';

3. 使用MapLocationPicker

下面是一个完整的示例，展示了如何使用MapLocationPicker来选择位置：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Map Location Picker Example'),
        ),
        body: MapLocationPickerExample(),
      ),
    );
  }
}

class MapLocationPickerExample extends StatefulWidget {
  @override
  _MapLocationPickerExampleState createState() => _MapLocationPickerExampleState();
}

class _MapLocationPickerExampleState extends State<MapLocationPickerExample> {
  LocationResult? _locationResult;

  void _pickLocation() async {
    final LocationResult? result = await MapLocationPicker().pickLocation(
      context,
      apiKey: 'YOUR_GOOGLE_MAPS_API_KEY',  // 请替换为你的Google Maps API Key
      enableMyLocation: true,
      myLocationButtonEnabled: true,
      title: 'Choose a location',
      description: 'Tap on the map to choose a location',
      zoom: 15.0,
    );

    if (result != null) {
      setState(() {
        _locationResult = result;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            'Selected Location:',
            style: TextStyle(fontSize: 18),
          ),
          _locationResult != null
              ? Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text('Latitude: ${_locationResult!.latitude}'),
                    Text('Longitude: ${_locationResult!.longitude}'),
                    Text('Address: ${_locationResult!.address}'),
                    SizedBox(height: 16),
                  ])
              : Text('No location selected yet.'),
          ElevatedButton(
            onPressed: _pickLocation,
            child: Text('Pick Location'),
          ),
        ],
      ),
    );
  }
}

注意事项

  1. Google Maps API Key：确保你已经获取了Google Maps的API Key，并在代码中替换YOUR_GOOGLE_MAPS_API_KEY。
  2. 权限：在Android的AndroidManifest.xml和iOS的Info.plist中，确保你已经添加了必要的权限和API Key配置。

权限配置（Android）

在AndroidManifest.xml中添加以下权限：

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

并在<application>标签内添加API Key：

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_GOOGLE_MAPS_API_KEY" />

权限配置（iOS）

在Info.plist中添加以下键和值：

<key>NSLocationWhenInUseUsageDescription</key>
<string>This app needs access to location when in use</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>This app needs access to location always</string>
<key>io.flutter.embedded_views_preview</key>
<true/>
<key>GOOGLE_MAPS_API_KEY</key>
<string>YOUR_GOOGLE_MAPS_API_KEY</string>

确保你已经按照这些步骤配置了你的项目，然后运行你的Flutter应用，应该就可以使用map_location_picker插件来选择地图位置了。

回到顶部