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