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

圆形标记 最后更新时间: 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 //单位:px
4

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("鼠标移入");;
});       

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

-

返回顶部 示例中心 常见问题 智能客服 公众号
二维码