问题:如何让地图完整显示指定半径的圆形(自动适配最大视野)?
方案:放弃手动设置缩放级别和中心点(setZoomAndCenter),改用 setBounds 方法,让地图引擎根据圆形的边界范围,自动计算最优的缩放级别和中心点,确保圆形完整显示。
// 步骤1:计算包含目标圆形的最小矩形边界框(经纬度范围)
// 地理常数:地球赤道上1度经度 ≈ 111000米(纬度方向1度距离近似相等)
const bounds = new AMap.Bounds(
[lng - (radius / 111000), lat - (radius / 111000)], // 左下角
[lng + (radius / 111000), lat + (radius / 111000)] // 右上角
);
// 步骤2: 让地图视野适配该边界框,自动缩放+居中
amapRef.current.amapRef.current.setBounds(bounds);
-
111000 :这是一个地理常数,表示地球赤道上1度经度对应的距离约为111000米
-
radius :地图上要显示的圆形半径(单位:米)
-
转换原理 :将 “米为单位的半径” 换算为 “经纬度差值”,通过该差值构建能完全包裹圆形的矩形边界框,地图基于此边界框适配视野,最终实现圆形完整显示。