圆形标记 最后更新时间: 2024年06月27日
本文介绍圆形标记AMap.CircleMarker，该标记可以在地图上显示圆形标记点，并允许自定义其位置和大小。
圆点标记示例
提示
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 = 10 //单位:px4
1.4 创建圆形 CircleMarker 实例
//创建圆形点标记 CircleMarker 实例
var circleMarker = new AMap.CircleMarker({
center: center, //圆心
radius: radius, //半径
strokeColor: "white", //轮廓线颜色
strokeWeight: 2, //轮廓线宽度
strokeOpacity: 0.5, //轮廓线透明度
fillColor: "rgba(0,0,255,1)", //圆点填充颜色
fillOpacity: 0.5, //圆点填充透明度
zIndex: 10, //圆点覆盖物的叠加顺序
cursor: "pointer", //鼠标悬停时的鼠标样式
});5
1.5 圆形 CircleMarker 对象添加到 Map
//圆形 circleMarker 对象添加到 Map
map.add(circleMarker);
//将覆盖物调整到合适视野
map.setFitView([circleMarker]);提示
删除已有circleMarker对象使用：map.remove(circleMarker)。
6
1.6 给 CircleMarker 添加事件
//添加点标记的移入事件
circleMarker.on("mouseover", function () {
console.log("鼠标移入");;
}); 