Flutter地图选点插件flutter_map_pin_picker的使用

地图选择器插件flutter_map_pin_picker的使用方法

flutter_map_pin_picker 是一个用于在 Flutter 应用中实现地图选点功能的插件。通过该插件，用户可以轻松地在地图上选择位置，并获取对应的地址信息。

插件依赖

首先，在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_map_pin_picker: ^版本号

然后运行 flutter pub get 来安装插件。

完整示例代码

以下是完整的代码示例，展示了如何使用 flutter_map_pin_picker 插件来实现地图选点功能。

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_geocoder/geocoder.dart'; // 用于解析地理坐标到地址
import 'package:flutter_map_pin_picker/flutter_map_pin_picker.dart'; // 地图选点插件
import 'package:google_maps_flutter/google_maps_flutter.dart'; // Google Maps 插件

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false, // 移除调试标志
      home: MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  Completer<GoogleMapController> _controller = Completer(); // 控制 Google Maps 的控制器
  MapPickerController mapPickerController = MapPickerController(); // 地图选点控制器

  CameraPosition cameraPosition = const CameraPosition(
    target: LatLng(31.2060916, 29.9187), // 初始地图中心点
    zoom: 14.4746, // 初始缩放级别
  );

  Address? address; // 保存选中的地址

  TextEditingController textController = TextEditingController(); // 用于显示地址的文本控制器

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: MapPicker(
              // 自定义图标
              iconWidget: const Icon(
                Icons.location_pin,
                size: 50,
              ),
              // 添加地图选点控制器
              mapPickerController: mapPickerController,
              child: GoogleMap(
                zoomControlsEnabled: false, // 禁用默认的缩放控件
                myLocationButtonEnabled: false, // 禁用定位按钮
                mapType: MapType.normal, // 地图类型
                initialCameraPosition: cameraPosition, // 初始化地图位置
                onMapCreated: (GoogleMapController controller) {
                  _controller.complete(controller); // 完成地图初始化
                },
                onCameraMoveStarted: () {
                  // 当地图开始移动时触发
                  mapPickerController.mapMoving?.call();
                },
                onCameraMove: (cameraPosition) {
                  // 更新当前相机位置
                  this.cameraPosition = cameraPosition;
                },
                onCameraIdle: () async {
                  // 当地图停止移动时触发
                  mapPickerController.mapFinishedMoving?.call();
                  // 获取当前位置的地址
                  List<Address> addresses = await Geocoder.local.findAddressesFromCoordinates(
                    Coordinates(
                      cameraPosition.target.latitude,
                      cameraPosition.target.longitude,
                    ),
                  );
                  // 更新 UI 显示地址
                  textController.text = addresses.first.addressLine ?? '';
                },
              ),
            ),
          ),
        ],
      ),
      bottomNavigationBar: BottomAppBar(
        color: Colors.transparent, // 透明背景
        elevation: 0,
        child: Container(
          padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
          color: Colors.blue, // 蓝色背景
          child: TextFormField(
            readOnly: true, // 文本框不可编辑
            decoration: const InputDecoration(
              contentPadding: EdgeInsets.zero,
              border: InputBorder.none,
            ),
            controller: textController, // 绑定地址文本控制器
            style: const TextStyle(fontSize: 12, color: Colors.white), // 样式设置
          ),
        ),
      ),
    );
  }
}