使用 flutter package 在 Google 地图上添加和删除制造商

Question

I need your help again

I have a google map using flutter_maps_package package on a web project. I receive location updates from node api and using web_socket_channel package. The data comes through fine and I re-draw the polyline from one location to the updated location. However clearing the markers and adding them again to updated locations doesn't work.

My approach is simple in addMarkers method we clear all markers and add them again with different latlng values.

class MapsDisplay extends StatefulWidget {      
  final Client client;
  const MapsDisplay(this.client, {Key? key}) : super(key: key);

  @override
  _MapsDisplayState createState() => _MapsDisplayState();
}

class _MapsDisplayState extends State<MapsDisplay> {
  GoogleMapController? _googleMapController;

  final LatLng _centralJakarta =
      const LatLng(-6.190661334599699, 106.82895257992107);
  final _channel = WebSocketChannel.connect(Uri.parse('ws://localhost:3000/'));
  List<Marker> _markers = [];

  List<PointLatLng>? _polylines;
  double? _distance;
  String? _driverId;

  @override
  void initState() {
    super.initState();
    initiateRequest(widget.client);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.center,
        children: [
          GoogleMap(
              myLocationEnabled: false,
              zoomControlsEnabled: false,
              initialCameraPosition:
                  CameraPosition(target: _centralJakarta, zoom: 15),
              markers: Set<Marker>.of(_markers),
              polylines: {
                if (_polylines != null)
                  Polyline(
                      polylineId: const PolylineId('diagonalLine'),
                      color: Colors.red,
                      width: 7,
                      points: _polylines!
                          .map((e) => LatLng(e.latitude, e.longitude))
                          .toList())
              },
              onMapCreated: (controller) => _googleMapController = controller),
          if (_driverId != null)
            Positioned(
                top: 20,
                child: Container(
                    height: 100,
                    width: 200,
                    child: Center(child: Text('km $_distance - $_driverId')),
                    decoration: BoxDecoration(
                        color: Colors.amberAccent,
                        borderRadius: BorderRadius.circular(20.0),
                        boxShadow: const [
                          BoxShadow(
                              color: Colors.black26,
                              offset: Offset(0, 2),
                              blurRadius: 6.0)
                        ]))),
        ],
      ),
    ); 
  }

  void initiateRequest(Client client) async {
    var body = client.toJson();
    _channel.sink.add(jsonEncode(body));

    _channel.stream.listen((data) {
      final Map<String, dynamic> result = jsonDecode(data);

      var userLocation = LatLng(result['userLocation']['latitude'],
          result['userLocation']['longitude']);

      var driverLocation = LatLng(result['nearestDriver']['latitude'],
          result['nearestDriver']['longitude']);

      _addMarkers(userLocation, driverLocation);
      _drawPolyline(userLocation, driverLocation);

      setState(() {
        _distance = result['nearestDriver']['distance'];
        _driverId = result['nearestDriver']['driverId'];
      });

      _googleMapController!.animateCamera(CameraUpdate.newCameraPosition(
          CameraPosition(target: driverLocation, zoom: 15)));
      });
  }

  void _drawPolyline(LatLng userLocation, LatLng driverLocation) {
    setState(() {
      _polylines = [
        PointLatLng(driverLocation.latitude, driverLocation.longitude),
        PointLatLng(userLocation.latitude, userLocation.longitude)
      ];
    });
  }

  void _addMarkers(LatLng userLocation, LatLng driverLocation) {
    setState(() {
      _markers.clear();
      _markers.add(Marker(
          markerId: const MarkerId('user'),
          infoWindow: const InfoWindow(title: 'Your Position'),
          icon:
              BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueGreen),
          position: userLocation));
      _markers.add(Marker(
          markerId: const MarkerId('driver'),
          infoWindow: const InfoWindow(title: 'Nearest Driver Position'),
          icon:
              BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueOrange),
          position: driverLocation));
    });
}

  @override
  void dispose() {
    _googleMapController!.dispose();
    super.dispose();
  }
}

Thanks again for all your help. Also if you have any other advice in terms of how I can improve this page pls advise.

Kind Regards:)

Answer 1

that's weird. a possible solution is every time you update your markers, pass a new key to the map:) this will force the map to rebuild.