如何使用flutter_map的MapEventLongPress获取长按地图的坐标

核心实现逻辑 #

flutter_map已经封装了长按事件的顶层回调，无需直接操作MapEventLongPress底层类，仅需在MapOptions中配置onLongPress参数即可直接拿到长按点的经纬度。如果需要处理长按后更新地图标记的逻辑，需要先将原页面改为StatefulWidget管理状态。

完整可运行示例代码 #

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';

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

  @override
  State<MapPage> createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  // 存储地图标记列表
  final List<Marker> _markers = [];
  // 可选：如果需要监听底层地图事件可以声明MapController
  final MapController _mapController = MapController();

  @override
  void initState() {
    super.initState();
    // 初始化默认标记
    _markers.add(
      Marker(
        width: 45.0,
        height: 45.0,
        point: LatLng(74, 40),
        builder: (context) => Container(
          child: IconButton(
            icon: Icon(Icons.location_on),
            color: Colors.red,
            iconSize: 45.0,
            onPressed: () async {},
          )
        )
      )
    );

    // 可选：底层事件流监听方式，适合需要统一处理所有地图事件的场景
    // _mapController.mapEventStream.listen((event) {
    //   if (event is MapEventLongPress) {
    //     LatLng pressPoint = event.location;
    //     debugPrint("长按坐标：${pressPoint.latitude}, ${pressPoint.longitude}");
    //     // 新增标记逻辑
    //     _addPressMarker(pressPoint);
    //   }
    // });
  }

  // 新增长按点标记
  void _addPressMarker(LatLng point) {
    setState(() {
      _markers.add(
        Marker(
          width: 45.0,
          height: 45.0,
          point: point,
          builder: (context) => Icon(Icons.location_on, color: Colors.blue, size: 45)
        )
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return FlutterMap(
      controller: _mapController, // 用底层监听方式时需要传controller
      options: MapOptions(
        center: LatLng(74, 40),
        minZoom: 10.0,
        // 长按回调配置，直接获取经纬度
        onLongPress: (tapPosition, LatLng point) {
          debugPrint("长按坐标：${point.latitude}, ${point.longitude}");
          // 调用新增标记方法，更新UI
          _addPressMarker(point);
        }
      ),
      layers: [
        TileLayerOptions(
          urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
          subdomains: ['a', 'b', 'c']
        ),
        MarkerLayerOptions(markers: _markers), // 用动态标记列表
      ]
    );
  }
}

关键修改说明 #

• 将原无状态的MapPage改为有状态组件，用于管理长按后生成的标记、存储坐标数据
• MapOptions中新增onLongPress回调，回调的第二个参数即为长按位置的LatLng坐标对象，可直接取用做业务逻辑处理
• 示例中默认实现了长按添加蓝色标记的效果，可根据需求自行修改回调内的处理逻辑

内容的提问来源于stack exchange，提问作者user1239871