开发 地图 JS API 2.0 进阶教程 圆形

圆形 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支持监听覆盖物的事件

2、本章涉及的属性及方法说明

2.1 AMap.Circle

参数/方法

说明

类型 

参数值描述

默认值

center

圆心位置

Array

经纬度对象或经纬度构成的一维数组。例如:

AMap.LngLat(116.39,39.9)[116.39, 39.9]

-

radius

圆的半径,单位:米

Number

取值范围[0,50000]

-

borderWeight

描边的宽度

Number

-

1

strokeColor

轮廓线颜色

String

使用16进制颜色代码赋值

#00D3FC

strokeOpacity

轮廓线透明度

Number

取值范围[0,1] 

0表示完全透明

1表示不透明

0.9

strokeWeight

轮廓线宽度

Number

-

2

fillOpacity

多边形填充透明度

Number

取值范围[0,1] 

0表示完全透明

1表示不透明

0.5

strokeStyle

轮廓线样式

String

实线: 'solid'

虚线: 'dashed'

'solid'

strokeDasharray

勾勒形状轮廓的虚线和间隙的样式,此属性在strokeStyle 为 dashed 时有效

Array

详见 参考手册

[10,5]

fillColor

多边形填充颜色

String

使用16进制颜色代码赋值

#00D3FC

zIndex

多边形覆盖物的叠加顺序。地图上存在多个多边形覆盖物叠加时,通过该属性使级别较高的多边形覆盖物在上层显示

Number

-

50

返回顶部 示例中心 常见问题 智能客服