Am using flutter_map
and at first i set up couple of markers and polylines in a way that a when a certain marker is pressed a certain polyline would show up.
My problem is after that whenever i click anywhere else, the Polyline doesn t become invisible again and just stays there forever.
import package:dilni/views/maproutes.dart ;
import package:flutter/material.dart ;
import package:flutter/services.dart ;
import package:flutter_map/flutter_map.dart ;
import package:flutter_map_location_marker/flutter_map_location_marker.dart ;
import package:latlong2/latlong.dart ;
import package:geolocator/geolocator.dart ;
class Route1MarkerWidget extends StatefulWidget {
final LatLng point;
final ValueChanged<bool> onTap;
const Route1MarkerWidget(
{super.key, required this.point, required this.onTap});
@override
State<Route1MarkerWidget> createState() => _Route1MarkerWidgetState();
}
class _Route1MarkerWidgetState extends State<Route1MarkerWidget> {
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => widget.onTap(true),
child: const Icon(
Icons.location_on,
color: Color.fromARGB(255, 230, 156, 18),
),
);
}
}
class Route2MarkerWidget extends StatefulWidget {
final LatLng point;
final ValueChanged<bool> onTap;
const Route2MarkerWidget(
{super.key, required this.point, required this.onTap});
@override
State<Route2MarkerWidget> createState() => _Route2MarkerWidgetState();
}
class _Route2MarkerWidgetState extends State<Route2MarkerWidget> {
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => widget.onTap(true),
child: const Icon(
Icons.location_on,
color: Color.fromARGB(255, 212, 12, 186),
),
);
}
}
class MapStart extends StatefulWidget {
const MapStart({super.key});
@override
State<MapStart> createState() => _MapStartState();
}
class _MapStartState extends State<MapStart> {
MapController mapController = MapController();
LatLng currentCenter = const LatLng(40.667578954102694, -73.90336806212608);
Future<void> _requestLocationPermission() async {}
@override
void initState() {
super.initState();
_requestLocationPermission().then((_) async {});
}
_centerOnMyLocation() async {
Position position = await Geolocator.getCurrentPosition(
desiredAccuracy: LocationAccuracy.high);
LatLng userLocation = LatLng(position.latitude, position.longitude);
mapController.move(userLocation, mapController.camera.zoom);
}
bool _showLine1 = false;
bool _showLine2 = false;
@override
Widget build(BuildContext context) {
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
return Scaffold(
body: FlutterMap(
mapController: mapController,
options: MapOptions(
initialCenter: currentCenter,
initialZoom: 14.5,
),
children: [
TileLayer(
urlTemplate: https://tile.openstreetmap.org/{z}/{x}/{y}.png ,
userAgentPackageName: tn.dilni.dilni ,
),
CurrentLocationLayer(),
MarkerLayer(
markers: [
Marker(
point: const LatLng(40.6693937337096, -73.90390454876147),
child: Route1MarkerWidget(
point: const LatLng(40.6693937337096, -73.90390454876147),
onTap: (bool showPolyline) =>
setState(() => _showLine1 = showPolyline),
),
),
Marker(
point: const LatLng(40.66582935431103, -73.9030140553811),
child: Route2MarkerWidget(
point: const LatLng(40.66582935431103, -73.9030140553811),
onTap: (bool showPolyline) =>
setState(() => _showLine2 = showPolyline),
),
),
],
),
PolylineLayer(
polylines: [
_showLine1
? Polyline(
points: route1pl.points,
strokeWidth: 10.0,
color: Colors.red)
: Polyline(
points: route1pl.points, color: Colors.transparent),
],
),
PolylineLayer(polylines: [
_showLine2
? Polyline(
points: route2pl.points,
strokeWidth: 10.0,
color: const Color.fromARGB(255, 13, 172, 55))
: Polyline(points: route2pl.points, color: Colors.transparent)
]),
]),
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
FloatingActionButton(
onPressed: () {
mapController.rotate(0.0);
},
tooltip: Orient North ,
child: const Icon(Icons.navigation),
),
const SizedBox(height: 10),
FloatingActionButton(
onPressed: () {
mapController.move(
mapController.camera.center, mapController.camera.zoom + 1.0);
},
tooltip: Zoom In ,
child: const Icon(Icons.zoom_in),
),
const SizedBox(height: 10),
FloatingActionButton(
onPressed: () {
mapController.move(
mapController.camera.center, mapController.camera.zoom - 1.0);
},
tooltip: Zoom Out ,
child: const Icon(Icons.zoom_out),
),
const SizedBox(height: 10),
FloatingActionButton(
onPressed: _centerOnMyLocation,
tooltip: Center on Me ,
child: const Icon(Icons.my_location),
),
const SizedBox(height: 10),
],
),
);
}
}
我试图用<条码>彩虹/条码>把植被填上<条码>,但失败,并击中了死端。 Maybe flutter_map_tappable_polyline
可帮助?