必须使用地图sdk原生circle类实现动态圆形范围，因css/svg无法随缩放平移同步；腾讯需setmap()且center为latlng实例、radius单位为米；高德需注意gcj-02坐标系并转换；百度point参数顺序为lng,lat；三者均需显式添加到地图且严格校验坐标系、单位与生命周期。
地图上的圆形范围不是纯 CSS 能画出来的「视觉圆」，必须依赖地图 SDK 提供的 Circle 类或等效覆盖物接口。直接用 border-radius 或 <circle></circle> SVG 只能盖在地图上层、不随缩放/平移同步，会错位。
腾讯地图：new qq.maps.Circle() 必须配合 setMap()
腾讯地图的圆形是独立覆盖物对象，创建后不会自动上图——漏掉 circle.setMap(map) 是最常见空白原因。
-
center参数必须是qq.maps.LatLng实例，传数组或对象会静默失败 -
radius单位固定为「米」，不是像素，1000 就是 1 公里，别按屏幕尺寸瞎估 - 地图容器
div#map必须有明确宽高（如style="width:600px;height:400px"），否则new qq.maps.Map()初始化会失败 - API 加载必须等
qq.maps.event.addListener(map, 'tilesloaded', callback)触发后再添加圆形，否则可能渲染异常
高德地图：AMap.Circle 的 radius 单位也是米，但坐标系要留意
高德默认使用 GCJ-02 坐标系，如果你用的是 WGS-84（比如 GPS 设备原始数据），直接传入会导致圆心偏移几百米——必须先调用 AMap.convertFrom() 转换。
-
AMap.Circle创建后需显式调用map.add(<code>circle)，没有setMap方法 - 填充透明度用
fillOpacity: 0.2（0–1），不是百分比；描边宽度strokeWeight单位是像素，不随缩放变化 - 如果圆形拖拽后位置不准，检查是否启用了
draggable: true但没监听moveend事件更新业务逻辑
百度地图：BMap.Circle 的 coords 参数顺序容易写反
百度地图的 BMap.Point(lng, lat) 是「经度在前、纬度在后」，和多数 API（如高德、腾讯）一致，但和 GeoJSON 规范（lat, lng）相反——粘贴坐标时务必核对。
-
new BMap.Circle(point, radius, opts)的opts中，fillColor和strokeColor不支持 rgba 字符串，只认十六进制或颜色关键字 - 添加到地图用
map.addOverlay(circle)，删除用map.removeOverlay(circle)，不能用removeChild - 若页面有多个地图实例，确保
circle添加到了当前激活的地图，否则看不见
纯 HTML/CSS/JS 实现「伪圆形范围」仅适用于静态图
如果只是展示静态截图（比如后台导出地图 PNG），可以用 <map></map> + <area shape="circle"> 定义热点，但这是图像映射，不响应地图交互，也不随缩放重绘。
-
<area shape="circle" coords="x,y,r">的x,y是图片左上角为原点的像素坐标，不是经纬度 - 用
canvas.arc()绘制圆，必须监听地图moveend和zoomend事件，手动重算经纬度→像素坐标的映射，成本高且易出错 - 用
SVG <circle></circle>叠加，需通过getPixelToPoint()类方法实时转换圆心，且 SVG 容器必须绝对定位并跟随地图容器大小变化
真正动态、可交互的地图圆形范围，绕不开地图 SDK 的原生 Circle 类。坐标系、单位、生命周期管理这三点，错一个就显示异常——别省那几行代码校验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
