圆形标记 最后更新时间: 2024年06月27日

试一试

AMap.CircleMarker 类与 AMap.Circle 类均可在地图上绘制圆形覆盖物。它们的区别在于AMap.Circle 为矢量图形类,随地图的缩放会改变大小;而 AMap.CircleMarker 类则不会随地图缩放而改变,但它拥有更少的性能消耗。

如果你想表示一个圆形标记推荐使用AMap.CircleMarker,如果你想表示一个圆形区域推荐使用AMap.Circle。

AMap.Circle教程

1.1 准备

1.2 创建地图

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

1.3 设置圆心位置和半径

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

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", //鼠标悬停时的鼠标样式
});

1.5 圆形 CircleMarker 对象添加到 Map

//圆形 circleMarker 对象添加到 Map
map.add(circleMarker);
//将覆盖物调整到合适视野
map.setFitView([circleMarker]);

1.6 给 CircleMarker 添加事件

//添加点标记的移入事件
circleMarker.on("mouseover", function () { 
 console.log("鼠标移入");;
}); 

查看所有AMap.CircleMarker属性及方法说明