如何在flutter_map中点击地图任意位置后获取对应经纬度坐标？

在flutter_map中实现点击任意位置获取经纬度的功能无需额外引入第三方库，直接使用MapOptions内置的onTap回调即可实现，具体修改方式如下：

实现步骤 #

• 在_MapScreenState类中新增变量存储选中的点位坐标，方便后续业务逻辑使用
• 为FlutterMap的options参数添加onTap回调配置，回调会直接返回点击位置的标准LatLng格式经纬度
• 若需要点击后同步更新地图上的标记，可修改MarkerLayerOptions的配置，通过setState刷新界面即可

完整修改后代码 #

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

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  // 存储选中的点位坐标
  latlng.LatLng? selectedPoint;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Your Map'),
      ),
      body: FlutterMap(
        options: MapOptions(
          center: latlng.LatLng(-23.5732052, -46.6331934),
          zoom: 18.0,
          plugins: [
            TappablePolylineMapPlugin(),
          ],
          // 新增onTap回调，直接获取经纬度
          onTap: (tapPosition, point) {
            setState(() {
              selectedPoint = point;
            });
            // 这里可直接打印或使用获取到的经纬度
            print("点击位置的经纬度：${point.latitude}, ${point.longitude}");
          },
        ),
        layers: [
          TileLayerOptions(
            urlTemplate: "https://api.mapbox.com/styles/v1/dxxx/ckwii7q6bxxrauou3d/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiZGVtaWFuMjAyMSIsImEiOiJjxxxxxxxxxxxxxxxxxxxaWs1In0.2x2m7ka-KZwzBR5XXgYkXQ",
            subdomains: ['a', 'b', 'c'],
            additionalOptions: {
              'accessToken':'pk.eyJ1IjoiZGVxxxxxxxxxxxxxxxxxxxxxxxxxxcHgxNXZoMnB1dGVvOWViaWs1In0.2x2m7ka-KZwzBR5XXgYkXQ',
              'id': 'mapbox.mapbox-streets-v8',
            },
            attributionBuilder: (_) {
              return Text("© OpenStreetMap contributors");
            },
          ),
          TappablePolylineLayerOptions(
              polylineCulling: true,
              polylines: [
                TaggedPolyline(
                  points: [latlng.LatLng(-22.5732052, -47.6331934), latlng.LatLng(-22.5732052, -47.6331934)],
                  tag: "My Polyline",
                ),
              ],
              onTap: (polylines, tapPosition) => print('Tapped: ' +
                  polylines.map((polyline) => polyline.tag).join(',') +
                  ' at ' +
                  tapPosition.globalPosition.toString()),
              onMiss: (tapPosition) {
                print('No polyline was tapped at position ' +
                    tapPosition.globalPosition.toString());
              }
          ),
          MarkerLayerOptions(
            markers: [
              Marker(
                width: 40.0,
                height: 40.0,
                // 如果有选中的点位就显示选中点位，否则显示默认点位
                point: selectedPoint ?? latlng.LatLng(-23.5732052, -46.6331934),
                builder: (ctx) =>
                    Container(
                      child: FlutterLogo(),
                    ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

注意事项 #

如果你同时使用了flutter_map_tappable_polyline插件，地图本身的onTap回调和插件的折线点击回调会共存，不会互相冲突，可根据业务需求自行处理回调逻辑。

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