在 map 中點擊某處后如何從 flutter_map 獲取經度和緯度？

Question

在選擇 map 內的一個點后，我需要返回經度和緯度，所以我在 map 的某個位置點擊，它會返回經緯度信息，我可以啟動 Z1D78DC8ED51214E518B5114FE2，但可以選擇一個地方並使用該信息進行回調，我找到了 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 package，但如果您不想使用 package，程序應該仍然相同。 只需將 ontap() 添加到 map 小部件。

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

對你來說 package 似乎是這樣的：

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

Answer 2

感謝您的幫助，它起作用了，有一件事我不明白，但無論如何都起作用，是第一個論點說：

無效函數（TapPosition，LatLng）？ 點按，

但是，如果我嘗試在上面的 function 中設置該類型作為傳入輸入，將無法正常工作，不知道為什么，所以我不得不使用動態？

    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(),
                  ),
            ),
          ],
        ),
      ],
    );
  }
}