圆形 Circle 最后更新时间: 2023年03月28日

下载完整代码

AMap.Circle 对象为用户提供在地图图面绘制圆形覆盖物的能力。可以为圆形覆盖物设置填充颜色、描边颜色、轮廓线样式等属性。

提示

AMap.Circle 类与上一章介绍到的 AMap.CircleMarker 类均为在地图上绘制圆形覆盖物的类。这两种方式的根本不同在于 AMap.Circle 为矢量图形类，随地图的缩放会改变大小；而 AMap.CircleMarker 类则不会随图面缩放而改变。

准备

成为开发者并创建 key

为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击具体操作。

圆形 Circle

创建步骤如下：

创建地图

// 创建地图
var map = new AMap.Map("container", {
  center: [116.433322, 39.900256], //设置地图初始化中心点位置
  mapStyle: 'amap://styles/whitesmoke',  //设置地图的显示样式
  viewMode: '2D'  //设置地图模式
  zoom: 14   //设置当前地图级别
});

设置圆心位置和半径

//设置圆形位置
var center = new AMap.LngLat(116.433322, 39.900255);
//设置圆的半径大小
var radius = 1000;

创建圆形 Circle 实例

// 创建圆形 Circle实例
var circle = new AMap.Circle({
  center: center, //圆心
  radius: radius, //半径
  borderWeight: 3,
  strokeColor: "#FF33FF", 
  strokeOpacity: 1,
  strokeWeight: 6,
  strokeOpacity: 0.2,
  fillOpacity: 0.4,
  strokeStyle: 'dashed',
  strokeDasharray: [10, 10], 
  // 线样式还支持 'dashed'
  fillColor: '#1791fc',
  zIndex: 50,
})

圆形 Circle 对象添加到Map

//圆形 Circle 对象添加到 Map
map.add(circle);
// 缩放地图到合适的视野级别
map.setFitView([ circle ])

查看属性和方法