使用flutter地图flutter包在谷歌地图上添加和删除制造商

Question

我再次需要你的帮助

我在一个网络项目上有一个使用flatter_maps_package包的谷歌地图。我使用web_socket_channel包从nodeapi接收位置更新。数据很好，我重新绘制了从一个位置到更新位置的多段线。但是，清除标记并将其再次添加到更新的位置是不起作用的。

我的方法很简单，在addMarkers方法中，我们清除所有标记，然后用不同的latlng值再次添加它们。

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

再次感谢你的帮助。此外，如果你对我如何改进这个页面有任何其他建议，请提供建议。

谨致问候：(

Answer 1

这很奇怪。一个可能的解决方案是，每次更新标记时，向地图传递一个新的键：(这将强制重建地图。