Flutter Map:解决CurrentLocationLayer标记的米级半径圆圈平移偏移问题
解决CurrentLocationLayer周围真实米数半径圆圈偏移问题
你当前代码的问题根源是把CircleLayer嵌套在DefaultLocationMarker内部,导致圆圈同时被标记的位移和地图的平移做两次变换,最终出现偏移且移动速度翻倍的情况。以下是两种可行的解决思路:
方案一:利用CurrentLocationLayer的位置流同步圆圈位置
通过CurrentLocationLayer自带的positionStream实时获取最新定位,将圆圈和定位标记平级放在Stack中,避免双重变换:
Widget userLocationMarker() { return StreamBuilder<LocationMarkerPosition>( stream: CurrentLocationLayer().positionStream, builder: (context, snapshot) { // 优先用实时定位,初始时用initialPosition兜底 final currentPosition = snapshot.data?.position ?? initialPosition; return Stack( children: [ CurrentLocationLayer( style: LocationMarkerStyle( showAccuracyCircle: false, ), ), CircleLayer( circles: [ CircleMarker( point: LatLng(currentPosition.latitude, currentPosition.longitude), radius: 15, useRadiusInMeter: true, color: Colors.black54, ), ], ), ], ); }, ); }
这样圆圈和定位标记都只跟随地图平移做一次变换,能保证两者始终对齐,同时useRadiusInMeter: true也满足真实米数半径的要求。
方案二:直接监听GeoLocator的位置更新流
如果更习惯用GeoLocator的原生位置流,也可以直接监听并同步圆圈位置:
late StreamSubscription<Position> _positionSubscription; LatLng _currentPosition; @override void initState() { super.initState(); _currentPosition = initialPosition; // 监听位置变化,实时更新当前位置 _positionSubscription = Geolocator.getPositionStream().listen((position) { setState(() { _currentPosition = LatLng(position.latitude, position.longitude); }); }); } @override void dispose() { // 页面销毁时取消订阅,避免内存泄漏 _positionSubscription.cancel(); super.dispose(); } Widget userLocationMarker() { return Stack( children: [ CurrentLocationLayer( style: LocationMarkerStyle( showAccuracyCircle: false, ), ), CircleLayer( circles: [ CircleMarker( point: _currentPosition, radius: 15, useRadiusInMeter: true, color: Colors.black54, ), ], ), ], ); }
核心逻辑就是不要将CircleLayer嵌套在定位标记内部,让两者作为独立层级共享同一位置数据源,这样就能彻底解决平移时的偏移问题,同时满足真实米数半径的需求。
内容的提问来源于stack exchange,提问作者RJrules64
相关产品推荐
相关产品推荐

