圆形 Circle 最后更新时间: 2023年12月05日
如果想要在地图上绘制圆形覆盖物，可以使用AMap.Circle，本文介绍如何在地图上绘制圆形覆盖物，并设置填充颜色、描边颜色、轮廓线样式等属性。
圆形覆盖物示例
提示
AMap.CircleMarker 类与 AMap.Circle 类均为在地图上绘制圆形覆盖物的方法。这两类的根本不同在于 AMap.Circle 为矢量图形类，随地图的缩放会改变大小；而 AMap.CircleMarker 类则不会随图面缩放而改变，但它拥有更小的性能消耗。
如果您想表示一个圆形标记推荐使用AMap.CircleMarker，如果您想表示表示一个圆形区域推荐使用AMap.Circle。
1、实现步骤
1
1.1 准备
成为开发者并创建 key
为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击 具体操作。
提示
您在2021年12月02日以后申请的 key 需要配合您的安全密钥一起使用。
2
1.2 创建地图
//创建地图
var map = new AMap.Map("container", {
center: [116.433322, 39.900256], //地图中心点
mapStyle: "amap://styles/whitesmoke", //地图的显示样式
viewMode: "2D", //地图模式
zoom: 14, //地图级别
});3
1.3 设置圆心位置和半径
提示
如果不知道如何确认经纬度前往 拾取坐标
//设置圆形位置
var center = new AMap.LngLat(116.433322, 39.900255);
//设置圆的半径大小
var radius = 1000;4
1.4 创建圆形 Circle 实例
//创建圆形 Circle 实例
var circle = new AMap.Circle({
center: center, //圆心
radius: radius, //半径
borderWeight: 3, //描边的宽度
strokeColor: "#FF33FF", //轮廓线颜色
strokeOpacity: 1, //轮廓线透明度
strokeWeight: 6, //轮廓线宽度
fillOpacity: 0.4, //多边形填充透明度
strokeStyle: "dashed", //轮廓线样式
strokeDasharray: [10, 10],
fillColor: "#1791fc", //多边形填充颜色
zIndex: 50, //多边形覆盖物的叠加顺序
});5
1.5 圆形 Circle 对象添加到 Map
//圆形 Circle 对象添加到 Map
map.add(circle);
//根据覆盖物范围调整视野
map.setFitView([ circle ])提示
删除已有Circle对象使用：map.remove(circle)。
6
1.6 给 Circle 添加事件
circle.on("mouseover", function () { //鼠标移入事件
alert("鼠标移入");
}); 提示
高德 JS API 2.0支持监听覆盖物的事件。