Flutter Google Map如何清除旧折线？已尝试多方案仍无效

在Flutter开发Google Map功能时，尝试将折线列表设为空、重置相关对象等方法清除旧折线，但均无效。

现有重置代码 #

setState(() {
  _marker = [];
  _mapMarkers = [];
  _markerInit = [];
  _polyLines = [];
  showPolygon = {};
  showCircles = {};
  polygon ={};
  circles ={};
  hideCircles ={};
  hidePolygon = {};
});

GoogleMap组件代码 #

return GoogleMap(
  onTap: (latLng) {
    if (isBottomSheetOpened) {
      Navigator.pop(context);
      isBottomSheetOpened = false;
    }
    this.widget.expansionTile.currentState!.collapse();
  },
  onMapCreated: (GoogleMapController controller) =>
      _onMapCreated(controller),
  mapType: trackingMapType,
  myLocationButtonEnabled: false,
  myLocationEnabled: false,
  mapToolbarEnabled: false,
  compassEnabled: false,
  circles: circles,
  polygons: polygon,
  zoomGesturesEnabled: true,
  zoomControlsEnabled: false,
  rotateGesturesEnabled: false,
  initialCameraPosition: _initialCameraPosition!,
  markers: Set<Marker>.of(_mapMarkers),
  polylines: Set<Polyline>.of(_polyLines),
  onCameraMove: (CameraPosition cameraPosition) {
    if (!isAnimationStarted) {
      setState(() {
        if (cameraPosition.zoom > 12) {
          _mapMarkers = _marker;
        } else {
          _mapMarkers = _markerInit;
        }
      });
    } else {
      if (_mapMarkers.length > 0) {
        int markerId = _markerIdVal();
        if (markerId < _mapMarkers.length) {
          Marker marker = _mapMarkers[_markerIdVal()];
          Marker updatedMarker = marker.copyWith(
            positionParam: cameraPosition.target,
          );
          setState(() {
            _mapMarkers[markerId] = updatedMarker;
          });
        }
      }
    }
  },
);

绘制折线的代码 #

for (TraceData traceData in traceResponse!.data!) {
  Marker marker = _getMarker(
      traceData,
      count,
      ((count == 0)
          ? BitmapDescriptor.defaultMarker
          : (count == (traceResponse!.data!.length - 1))
              ? BitmapDescriptor.fromBytes(
                  Uint8List.fromList(rotatedImage))
              : markerList[traceData.vehStatus!.round()]),
      widget.vehicleDetails.isBS6!);

  if (count == 0 || count == traceResponse!.data!.length - 1) {
    _markerInit.add(marker);
  }
  _marker.add(marker);

  latLongs.add(LatLng(traceData.latitude!, traceData.longitude!));
  count++;
}
double kms =
    getDistanceInKm(latLongs[0], latLongs[latLongs.length - 1]);
//("total distance $kms kms");
setState(() {
  _mapMarkers = _markerInit;
  _loadPolyLine(latLongs);
});

清除按钮的方法 #

void clearData() async{
  setState(() {
    _marker = [];
    _mapMarkers = [];
    _markerInit = [];
    _polyLines = [];
    showPolygon = {};
    showCircles = {};
    polygon ={};
    circles ={};
    hideCircles ={};
    hidePolygon = {};
  });
}

有效清除旧折线的解决方案 #

1. 绘制新折线前先清空旧数据
   在_loadPolyLine方法开头先清空折线列表，避免旧折线残留：

   void _loadPolyLine(List<LatLng> latLongs) {
     setState(() {
       _polyLines.clear(); // 清空旧折线
       // 创建并添加新折线
       Polyline newPolyline = Polyline(
         polylineId: const PolylineId('trace-line'),
         points: latLongs,
         color: Colors.blue,
         width: 3,
       );
       _polyLines.add(newPolyline);
     });
   }
   

2. 优化clearData方法的执行逻辑
   确认_polyLines的清空操作在setState内执行，确保触发UI更新。也可以直接用clear()方法替代重新赋值空列表：

   void clearData() {
     setState(() {
       _polyLines.clear();
       // 其他需要重置的对象...
     });
   }
   

3. 确保折线ID唯一性
   如果存在多条折线，每条折线的polylineId必须唯一，避免因ID重复导致无法正确清除或更新折线。

4. 排查非setState的折线修改操作
   检查代码中是否有未通过setState修改_polyLines的逻辑，这类操作会导致地图UI无法同步更新。

5. 验证参数绑定正确性
   确认GoogleMap组件的polylines参数是Set<Polyline>.of(_polyLines)，当_polyLines为空时，这个集合也会为空，地图上的折线会被自动清除。

内容的提问来源于stack exchange，提问作者Nandyala Raja Pragnesh Reddy