location - How to get the movement of cars in real time using the flutter_map package flutter and location_package?

Question

So the thing is I'm trying to get the movement of cars on the map in real time, that is, I want the markers to move across the map in accordance with how the car is moving in real time. I use the OSM plugin because I am not allowed to use Google Maps. I wrote a wrapper to get the location and check if the location changed, and then I used the future builder to bring up all the markers to the map. But nothing works.

I've seen examples with Google Maps and there is a specific function that allows you to update the marker in real time on the map. I have not seen anything like this in OSM map. I don't understand what I am doing wrong, although I have been trying to solve the problem for several weeks now. It seems to me that I am missing something obvious and doing something wrong.

Also in my API, I have all the necessary points along which the car moves: that is, I already have latitude and longitude in the API and I call it to the CurrentLocation, but this does not work.

Could you please help me and point out exactly where i am making the mistake? Is it possible to track the movement of the cars in real time using OSM maps or do I need to consider another option?

Thanks.

Now the full code is:

 List<LocVeh> listDir;
  Future<List<LocVeh>> futureLoc;
  List<Marker> allMarkers = [];
  //the end of this

  //the locaion package here and my API
  LocVeh _currentLocation;
  MapController _mapController;

  bool _liveUpdate = false;
  bool _permission = false;

  String _serviceError = '';

  var interActiveFlags = InteractiveFlag.all;

  final Location _locationService = Location();

  @override
  void initState() {
    super.initState();
    _mapController = MapController();
    initLocationService();
    futureLoc = fetchLoc();
  }

  void initLocationService() async {
    await _locationService.changeSettings(
      accuracy: LocationAccuracy.high,
      interval: 1000,
    );

    LocVeh location;
    bool serviceEnabled;
    bool serviceRequestResult;

    try {
      serviceEnabled = await _locationService.serviceEnabled();

      if (serviceEnabled) {
        var permission = await _locationService.requestPermission();
        _permission = permission == PermissionStatus.granted;

        if (_permission) {
          location = (await _locationService.getLocation()) as LocVeh;
          _currentLocation = location;
          _locationService.onLocationChanged
              .listen((LocationData result) async {
            if (mounted) {
              setState(() {
                _currentLocation = result as LocVeh;

                // If Live Update is enabled, move map center
                if (_liveUpdate) {
                  _mapController.move(
                      latLng.LatLng(
                          _currentLocation.uLong, _currentLocation.uLat),
                      _mapController.zoom);
                }
              });
            }
          });
        }
      } else {
        serviceRequestResult = await _locationService.requestService();
        if (serviceRequestResult) {
          initLocationService();
          return;
        }
      }
    } on PlatformException catch (e) {
      print(e);
      if (e.code == 'PERMISSION_DENIED') {
        _serviceError = e.message;
      } else if (e.code == 'SERVICE_STATUS_ERROR') {
        _serviceError = e.message;
      }
      location = null;
    }
  }

  @override
  Widget build(BuildContext context)  {
    latLng.LatLng currentLatLng;

    // Until currentLocation is initially updated, Widget can locate to 0, 0
    // by default or store previous location value to show.
    if (_currentLocation != null) {
      return FutureBuilder(builder: (context, snapshot){
        if(snapshot.hasData){
          listDir = snapshot.data;
          listDir.forEach((element) {
            allMarkers = listDir.map((e) => Marker(
              point: latLng.LatLng(_currentLocation.uLat, _currentLocation.uLong),
              width: 5,
              height: 5,
              builder: (ctx) => Icon(Icons.directions_train_outlined),
            )).toList(growable: true);
          });
        }else if (snapshot.hasError) {
          return Text("${snapshot.error}");
        }
        return Center(
          child: CircularProgressIndicator(
            backgroundColor: Colors.green,
            strokeWidth: 2,
          ),
        );
      });
    } else {
      currentLatLng = latLng.LatLng(0, 0);
    }

child: FlutterMap(
                mapController: _mapController,
                options: MapOptions(
                  center: latLng.LatLng(48.707103, 44.516939),
                  zoom: 5.0,
                ),
                layers: [
                  TileLayerOptions(
                    urlTemplate:
                    'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    subdomains: ['a', 'b', 'c'],
                    // For example purposes. It is recommended to use
                    // TileProvider with a caching and retry strategy, like
                    // NetworkTileProvider or CachedNetworkTileProvider
                    tileProvider: NonCachingNetworkTileProvider(),
                  ),
                  MarkerLayerOptions(markers: allMarkers)
                ],

question from:https://stackoverflow.com/questions/66064071/how-to-get-the-movement-of-cars-in-real-time-using-the-flutter-map-package-flutt

Answer 1

Waitting for answers