Flutter地图选择插件map_picker_free的使用

Flutter 地图选择插件 map_picker_free 的使用

特性

  • 从地图上选择位置
  • 按地点搜索位置
  • 使用简单
  • 完全免费，无需任何 API 密钥

示例

Flutter 地图选择插件

目标

此库设计用于在 Flutter 应用程序中为所有平台设置位置。

开始使用

在 Dart 文件中导入以下包：

import 'package:map_picker_free/map_picker_free.dart';

使用方法很简单，在 body 中显示它，并在 onPicked() 方法中返回 pickedData 对象并使用 Navigator.pop。您需要传递地图的默认中心位置和一个 onPicked 方法以获取从地图上选择的位置。

MapPicker(
  center: LatLong(5, 10), // 设置地图的初始中心位置
  onPicked: (pickedData) {
    Navigator.pop(context, pickedData); // 返回选中的数据
  },
)

使用方法

现在，如果您按下“Set Current Location”按钮，您将通过 onPicked 方法获得选定的位置。

在 onPicked 方法中，您会收到 pickedData。

pickedData 有两个属性：

  1. latLong
  2. address

latLong 还有两个属性：

  1. latitude
  2. longitude

例如：

MapPicker(
  center: LatLong(5, 10), // 设置地图的初始中心位置
  onPicked: (pickedData) {
    Navigator.pop(context, pickedData); // 返回选中的数据
  },
)

您可以这样获取纬度、经度和地址：

// 获取纬度
double latitude = pickedData.latLong.latitude;
// 获取经度
double longitude = pickedData.latLong.longitude;
// 获取地址
String address = pickedData.address;

完整示例

以下是一个完整的示例代码：

import 'package:flutter/material.dart';
import 'package:map_picker_free/map_picker_free.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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: MapPicker(
        center: LatLong(5, 10), // 设置地图的初始中心位置
        onPicked: (pickedData) {
          Navigator.pop(context, pickedData); // 返回选中的数据
        },
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用map_picker_free插件来选择地图位置并获取相关信息的代码示例。map_picker_free是一个用于在Flutter应用中实现地图位置选择的插件。

第一步：添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  map_picker_free: ^latest_version  # 请使用最新版本号

第二步：导入插件

在你的Dart文件中导入map_picker_free插件：

import 'package:map_picker_free/map_picker_free.dart';
import 'package:geocoding/geocoding.dart';  // 用于处理地理编码（可选）

第三步：配置权限

在AndroidManifest.xml中添加必要的权限（如果尚未添加）：

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

第四步：实现地图位置选择功能

在你的Flutter组件中，使用MapPickerFree.pickLocation方法来选择地图位置，并处理选择结果。

import 'package:flutter/material.dart';
import 'package:map_picker_free/map_picker_free.dart';
import 'package:geocoding/geocoding.dart';  // 用于处理地理编码（可选）

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Map Picker Free Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              // 调用选择位置的方法
              try {
                final result = await MapPickerFree.pickLocation({
                  'apiKey': 'YOUR_GOOGLE_MAPS_API_KEY',  // 请替换为你的Google Maps API Key
                });

                if (result != null) {
                  // 处理选择结果
                  final location = result['location'];
                  final address = await getAddressFromLatLng(location);

                  // 显示结果
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(
                      content: Text(
                        'Location: ${location['latitude']}, ${location['longitude']}\nAddress: $address',
                      ),
                    ),
                  );
                }
              } catch (e) {
                // 处理错误
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(
                    content: Text('Error: ${e.toString()}'),
                  ),
                );
              }
            },
            child: Text('Pick Location'),
          ),
        ),
      ),
    );
  }

  // 根据经纬度获取地址（可选）
  Future<String> getAddressFromLatLng(Map<String, double> latLng) async {
    final geocoder = Geocoder.google('YOUR_GOOGLE_MAPS_GEOCODING_API_KEY');  // 请替换为你的Google Maps Geocoding API Key
    final places = await geocoder.reverseGeocode(latLng['latitude']!, latLng['longitude']!);

    if (places.isNotEmpty) {
      return places.first.formattedAddress;
    } else {
      return 'Address not found';
    }
  }
}

注意事项

  1. API Key：请确保你已经获取了Google Maps API Key和Google Maps Geocoding API Key，并将其替换到代码中的相应位置。
  2. 权限处理：在实际应用中，你需要在运行时请求位置权限，可以使用permission_handler插件来处理这些权限。
  3. 错误处理：示例代码只做了简单的错误处理，你可以根据实际需求添加更多的错误处理逻辑。

通过以上步骤，你就可以在Flutter应用中使用map_picker_free插件来选择地图位置并获取相关信息了。

回到顶部