Flutter地图选择插件map_picker_flutter的使用

Flutter地图选择插件map_picker_flutter的使用

Map Picker Flutter 是一个用于在 Flutter 应用中选择地图位置的插件。它支持多种平台，包括 Android、iOS、Web、Windows、Linux 和 macOS。

支持的平台

  • ✅ Android；
  • ✅ iOS；
  • ✅ Web；
  • ✅ Windows；
  • ✅ Linux；
  • ✅ MacOS；

维护帮助

我在维护很多仓库，并且逐渐感到疲惫。如果你能帮我打气，买杯咖啡将会让我非常高兴并获得更多能量。

Buy Me A Coffee

目标

这个库特别为 Web 和桌面平台设计，但当然你也可以在移动设备上使用。

开始使用

首先，你需要调用 MapPicker.init() 方法来初始化插件。这一步只需要执行一次。

MapPicker.init(
    /// 自定义搜索构建器小部件，如果为null，则使用包的默认值
    searchBuilder: (Function(String address) search) => MyCustomWidget(),

    /// 自定义地址构建器小部件，如果为null，则使用包的默认值
    addressBuilder: (String address, Function done) => MyCustomWidget(),

    /// 自定义进度小部件，如果为null，则使用包的默认值
    progressWidget: MyCustomWidget(),

    /// 自定义标记，如果为null，则使用包的默认值
    marker: MyCustomWidget(),

    /// 以上都是为了设置全局小部件，在任何时候你都需要调用此包

    theme: MPickerTheme(
        /// # 初始位置
        initialLocation: LatLng(-23.572143, -46.613275),

        /// # 地址未找到时显示的文本
        errorAddressMissing: '错误，地址未找到。',

        /// # 查找地址时出现错误时显示的文本
        errorToFindAddress: '无法找到此地址，请重试。',

        /// # 未选择任何地址时的初始文本
        withoutAddress: '未选择地址',

        /// # 如果你不使用自定义小部件，此处将显示的文本
        searchHint: '在此处输入...',
        searchLabel: '搜索：',

        /// # 返回的Google地图API的语言
        lang: 'pt-BR'),

    /// 我的Google地图API密钥
    key: 'YOUR_GOOGLE_API_KEY');

使用方法

现在你可以通过两种方式使用它：

移动设备

只需调用导航器并等待响应，例如：

final MPAddress address = await Navigator.push(context, MaterialPageRoute(builder: (c) => MapPicker(
    /// 这里，如果你想覆盖全局参数的任何内容，可以

    /// # 自定义搜索构建器小部件，如果为null，则使用全局或默认值
    searchBuilder: (Function(String address) search) => MyCustomWidget(),

    /// # 自定义地址构建器小部件，如果为null，则使用全局或默认值
    addressBuilder: (String address, Function done) => MyCustomWidget(),

    /// # 自定义进度小部件，如果为null，则使用全局或默认值
    progressWidget: MyCustomWidget(),

    /// # 自定义主题，如果为null，则使用全局或默认值
    theme: MPickerTheme(...),

    /// # 自定义标记，如果为null，则使用全局或默认值
    marker: MyWidget()
)));

网页/桌面

在这个平台上，由于屏幕较大，我认为使用对话框更智能，所以我已经为你准备好了。

final MPAddress address = await MapPickerTemplate.dialogAddressPicker(
    context: context);

当然，你可以在任何平台上使用这两种方式，这只是我的建议。

完整示例

以下是一个完整的示例代码，展示了如何使用 map_picker_flutter 插件。

import 'package:flutter/material.dart';
import './../lib/map_picker.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(title: 'Map Picker', home: MainScreen());
  }
}

class MainScreen extends StatelessWidget {
  final control = TextEditingController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    MapPicker.init(
        theme: MPickerTheme(
            /// # 初始位置
            initialLocation: LatLng(-23.572143, -46.613275),

            /// # 地址未找到时显示的文本
            errorAddressMissing: '错误，地址未找到。',

            /// # 查找地址时出现错误时显示的文本
            errorToFindAddress: '无法找到此地址，请重试。',

            /// # 未选择任何地址时的初始文本
            withoutAddress: '未选择地址',

            /// # 如果你不使用自定义小部件，此处将显示的文本
            searchHint: '在此处输入...',
            searchLabel: '搜索：',

            /// # 返回的Google地图API的语言
            lang: 'pt-BR'),
        key: 'YOUR_GOOGLE_API_KEY');

    /// # 这里演示如何通过对话框获取地址
    return Scaffold(
        body: Center(
            child: ElevatedButton(
                onPressed: () async => print('address: ${await MapPickerTemplate.dialogAddressPicker(
                    /// # 这里你可以传递自定义的小部件来放置文本和搜索
                    searchBuilder: (search) => Card(child: TextField(decoration: InputDecoration(
                      labelText: '搜索：',
                      hintText: '在此处输入...',
                      prefixIcon: IconButton(
                        icon: Icon(Icons.arrow_back_outlined),
                        onPressed: () => Navigator.pop(context)
                      ),
                      suffixIcon: IconButton(
                        icon: Icon(Icons.search),
                        /// # 搜索时，只需调用 `search` 方法并传入地址字符串
                        onPressed: () => search(control.text)
                      )
                    )),
                    controller: control)),
                    
                    /// # 这里你的自定义小部件显示当前选中的地址
                    addressBuilder: (txt, done) => Card(
                      /// # 如果你想在这里放一个按钮来完成流程，只需调用 `done` 函数
                      child: Container(
                        padding: EdgeInsets.all(10),
                        child: Text(txt, textAlign: TextAlign.center)
                      )
                    ),
                    
                    /// # 你可以传递自定义标记
                    marker: Icon(Icons.location_pin, color: Colors.redAccent, size: 30),
                    
                    /// # 负按钮上的文本
                    btnCancel: '取消',
                    
                    /// # 正按钮上的文本
                    btnSave: '保存',
                    context: context)}),
                child: Text('地址选择器'))));
  }
}

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

1 回复

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


map_picker_flutter 是一个用于在 Flutter 应用程序中选择位置的插件。它允许用户在交互式地图上选择一个位置，并返回该位置的经纬度坐标。使用这个插件，你可以轻松地集成地图选择功能到你的应用中。

安装

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

dependencies:
  flutter:
    sdk: flutter
  map_picker_flutter: ^1.0.0  # 请使用最新版本

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

基本用法

  1. 导入包：在你的 Dart 文件中导入 map_picker_flutter 包。

    import 'package:map_picker_flutter/map_picker_flutter.dart';

  2. 使用 MapPicker 小部件：你可以使用 MapPicker 小部件来显示地图并允许用户选择位置。

    class MapPickerExample extends StatefulWidget {
  [@override](/user/override)
  _MapPickerExampleState createState() => _MapPickerExampleState();
}

class _MapPickerExampleState extends State<MapPickerExample> {
  LatLng? selectedLocation;

  Future<void> _pickLocation() async {
    final LatLng? location = await Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => MapPicker(
          apiKey: "YOUR_GOOGLE_MAPS_API_KEY",
          initialPosition: LatLng(37.7749, -122.4194), // 初始位置
        ),
      ),
    );

    if (location != null) {
      setState(() {
        selectedLocation = location;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Map Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (selectedLocation != null)
              Text(
                'Selected Location: ${selectedLocation!.latitude}, ${selectedLocation!.longitude}',
              ),
            ElevatedButton(
              onPressed: _pickLocation,
              child: Text('Pick Location'),
            ),
          ],
        ),
      ),
    );
  }
}

  3. 获取 Google Maps API 密钥：在使用 MapPicker 之前，你需要获取一个有效的 Google Maps API 密钥。你可以通过 Google Cloud Platform 创建一个新的项目并启用 Google Maps API 来获取密钥。

  4. 处理选定的位置：在用户选择位置后，MapPicker 会返回一个 LatLng 对象，其中包含所选位置的经纬度坐标。你可以使用这些坐标在你的应用中进行进一步的处理。

自定义选项

MapPicker 提供了一些自定义选项，例如设置初始位置、地图类型、标记图标等。以下是一些常用的自定义选项：

  • initialPosition: 设置地图的初始中心位置。
  • mapType: 设置地图类型（例如，普通地图、卫星地图等）。
  • markerIcon: 设置地图上显示的标记图标。
  • zoom: 设置地图的初始缩放级别。
MapPicker(
  apiKey: "YOUR_GOOGLE_MAPS_API_KEY",
  initialPosition: LatLng(37.7749, -122.4194),
  mapType: MapType.normal,
  markerIcon: BitmapDescriptor.defaultMarker,
  zoom: 12.0,
);

注意事项

  • Google Maps API 密钥：确保你在 MapPicker 中使用了有效的 Google Maps API 密钥。如果密钥无效，地图将无法正常显示。
  • 权限：在 Android 和 iOS 上使用地图功能时，确保你已经正确配置了所需的权限。

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 map_picker_flutter 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Map Picker Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MapPickerExample(),
    );
  }
}

class MapPickerExample extends StatefulWidget {
  [@override](/user/override)
  _MapPickerExampleState createState() => _MapPickerExampleState();
}

class _MapPickerExampleState extends State<MapPickerExample> {
  LatLng? selectedLocation;

  Future<void> _pickLocation() async {
    final LatLng? location = await Navigator.of(context).push(
      MaterialPageRoute(
        builder: (context) => MapPicker(
          apiKey: "YOUR_GOOGLE_MAPS_API_KEY",
          initialPosition: LatLng(37.7749, -122.4194), // 初始位置
        ),
      ),
    );

    if (location != null) {
      setState(() {
        selectedLocation = location;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Map Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (selectedLocation != null)
              Text(
                'Selected Location: ${selectedLocation!.latitude}, ${selectedLocation!.longitude}',
              ),
            ElevatedButton(
              onPressed: _pickLocation,
              child: Text('Pick Location'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部