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

Time:11-29

I need to get longitue and latitude back after selecting a spot inside the map, so I tap somewhere in a map, and it returns lat and long information, I'm able to launch the map, add places, but I just can't choose a place and get a callback with that information, I've found solutions for googlemaps, but not for flutter_map, thanks a lot !!

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

CodePudding user response:

I am using the package:google_maps_flutter package, but if you do not want to use that package the procedure should still be the same. Simply add a ontap() to the map widget.

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

For you package it seems to be like this:

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

CodePudding user response:

Thank you for the help, it worked, there's one thing i did not understand, but worked any way, is that the first argument says:

void Function(TapPosition, LatLng)? onTap,

But if I try to set that type in my function above as an incomming input, wont work, not sure why, so I had to use dynamic !?

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