如何在点击地图某处后从 flutter_map 获取经度和纬度？

Question

我需要在地图中选择一个点后返回经度和纬度，所以我点击地图中的某个地方，它 returns 纬度和经度信息，我可以启动地图，添加地点，但我无法选择地点并获得有关该信息的回调，我已经找到了针对 googlemaps 的解决方案，但没有针对 flutter_map，非常感谢！！

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> {
    @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Your Map'),
      ),
      body: FlutterMap(
        options: new MapOptions(
          center: latlng.LatLng(-23.5732052, -46.6331934),
          zoom: 18.0,
          plugins: [
            TappablePolylineMapPlugin(),
          ],
        ),
        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(
            // Will only render visible polylines, increasing performance
              polylineCulling: true,
              polylines: [
                TaggedPolyline(
                  points: [latlng.LatLng(-22.5732052, -47.6331934), latlng.LatLng(-22.5732052, -47.6331934)],

                  tag: "My Polyline", // An optional tag to distinguish polylines in callback
                  // ...all other Polyline options
                ),
              ],
              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:  latlng.LatLng(-23.5732052, -46.6331934),
                builder: (ctx) =>
                    Container(
                      child: FlutterLogo(),
                    ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Answer 1

我正在使用 package:google_maps_flutter 包，但如果您不想使用该包，过程应该仍然相同。只需将 ontap() 添加到地图小部件即可。

child: GoogleMap(
        onTap: (latLng) {
          print('${latLng.latitude}, ${latLng.longitude}');
        },

你的包好像是这样的：

options: MapOptions(
                    center: LatLng(45.5231, -122.6765),
                    zoom: 13.0,
                    onTap: _handleTap),

Answer 2

谢谢你的帮助，它奏效了，有一件事我不明白，但无论如何都奏效了，第一个参数说：

无效函数（TapPosition，LatLng）？ onTap,

但是如果我尝试在上面的函数中将该类型设置为传入输入，将无法工作，不知道为什么，所以我不得不使用动态！？

    void _retPositionMap(dynamic positio, latlng.LatLng direct) {
    
      print(positio.runtimeType);
      // print(direct.latitude);
      // print(direct.longitude);
    }

class _MapScreenState extends State<MapScreen> {
  @override
  Widget build(BuildContext context) {
    return FlutterMap(
      options: MapOptions(
        center: latlng.LatLng(-23.569953, -46.635863),
        zoom: 14.0,
        //onTap: _handleTap,
          onTap: _retPositionMap,

      ),
      layers: [
        TileLayerOptions(
          urlTemplate: "https://api.mapbox.com/styles/v1/dxx2021/ckwii7q6b284d14s0jrauou3d/tiles/256/{z}/{x}/{y}@2x?access_token=pk.exxjoiZGVtaWFuMjAyxxxxx2cHgxNXZoMnB1dGVvOWViaWs1In0.2x2m7ka-KZwzBR5XXgYkXQ",
         // subdomains: ['a', 'b', 'c'],
          additionalOptions: {
            'accessToken':'pk.eyJ1IjoiZGVtxxxxxxxxiOiJja3dpOGc2cHgxNXZoMnB1dGVvOWViaWs1In0.2x2m7ka-KZwzBR5XXgYkXQ',
            'id': 'mapbox.mapbox-streets-v8',
          },
          // attributionBuilder: (_) {
          //   return Text("© OpenStreetMap contributors");
          // },
        ),
        MarkerLayerOptions(
          markers: [
            Marker(
              width: 80.0,
              height: 80.0,
              point: latlng.LatLng(-23.569953, -46.635863),
              builder: (ctx) =>
                  Container(
                    child: FlutterLogo(),
                  ),
            ),
          ],
        ),
      ],
    );
  }
}

如何在点击地图某处后从 flutter_map 获取经度和纬度？

How to get longitude and latitude from flutter_map after tapping somewhere in the map?

android

flutter

flutter-dependencies