圆形标记 |
您所在的位置:网站首页 › ps新建圆形图层加文字 › 圆形标记 |
本文介绍圆形标记AMap.CircleMarker,该标记可以在地图上显示圆形标记点,并允许自定义其位置和大小。 圆点标记示例试一试 下载完整代码 提示AMap.CircleMarker 类与 AMap.Circle 类均可在地图上绘制圆形覆盖物。它们的区别在于 AMap.Circle 为矢量图形类,随地图的缩放会改变大小;而 AMap.CircleMarker 类则不会随地图缩放而改变,但它拥有更少的性能消耗。 如果你想表示一个圆形标记推荐使用AMap.CircleMarker,如果你想表示一个圆形区域推荐使用AMap.Circle。 AMap.Circle教程 1、添加圆形标记点11.1 准备成为开发者并创建 key为了正常调用 API ,请先注册成为高德开放平台开发者,并申请 web 平台(JS API)的 key 和安全密钥,点击 具体操作。 提示你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。 21.2 创建地图var map = new AMap.Map("container", { center: [116.433322, 39.900256], //地图中心点 mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式 viewMode: "2D", //设置地图模式 zoom: 14, //地图级别 });前往展示地图,了解完整地图创建 31.3 设置圆心位置和半径提示如果不知道如何确认经纬度可前往 拾取坐标 //设置圆形位置 var center = new AMap.LngLat(116.433322, 39.900255); //设置圆的半径大小 var radius = 10 //单位:px41.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", //鼠标悬停时的鼠标样式 });51.5 圆形 CircleMarker 对象添加到 Map//圆形 circleMarker 对象添加到 Map map.add(circleMarker); //将覆盖物调整到合适视野 map.setFitView([circleMarker]);提示删除已有circleMarker对象使用:map.remove(circleMarker)。 查看所有AMap.CircleMarker属性及方法说明 61.6 给 CircleMarker 添加事件//添加点标记的移入事件 circleMarker.on("mouseover", function () { console.log("鼠标移入");; }); 2、本章涉及的属性及方法说明2.1 AMap.CircleMarker参数/方法 说明 类型 参数值描述 默认值 center 圆心位置 Array 经纬度对象或经纬度构成的一维数组。例如: AMap.LngLat(116.39,39.9) | [116.39, 39.9] - radius 圆半径,单位:px 最大值64 Number - - strokeColor 轮廓线颜色 String 使用16进制颜色代码赋值 #00D3FC strokeWeight 轮廓线宽度 Number - 2 strokeOpacity 轮廓线透明度 Number 取值范围[0,1] 0表示完全透明 1表示不透明 0.9 fillColor 多边形填充颜色 String 使用16进制颜色代码赋值 #00B2D5 fillOpacity 多边形填充透明度 Number 取值范围[0,1] 0表示完全透明 1表示不透明 0.5 strokeStyle 轮廓线样式 String 实线: 'solid',虚线: 'dashed' 'solid' zIndex 多边形覆盖物的叠加顺序。地图上存在多个多边形覆盖物叠加时,通过该属性使级别较高的多边形覆盖物在上层显示 Number - 10 cursor 鼠标悬停时的鼠标样式 String 自定义cursor,IE仅支持cur/ani/ico格式,Opera不支持自定义cursor - 查看所有AMap.CircleMarker属性及方法说明 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |