海量点标记 MassMarks 最后更新时间: 2024年01月02日
当需要高效展示海量点标记，但不需要展示文本类信息时，推荐使用AMap.MassMarks。本文介绍如何添加海量点标记。
海量点示例
提示
AMap.MassMarks并不是普通的覆盖物，它是由海量点组成的一个地图图层。
MassMarks和LabelMarker的区别在于，MassMarks不支持添加文本，但能自动生成海量点图层，而LabelMarker则需要用户手动添加LabelsLayer海量点图层。
1、添加海量点标记
1
1.1 准备
成为开发者并创建 key
为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击 具体操作。
提示
你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。
2
1.2 创建地图
const map = new AMap.Map("container", {
zoom: 12, //地图级别
center: [116.397428, 39.90923], //地图中心点
mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
viewMode: "2D", //设置地图模式
});3
1.3 创建海量点对象
样式设置
var style = {
url: "//vdata.amap.com/icons/b18/1/2.png", //图标地址
size: new AMap.Size(11, 11), //图标大小
anchor: new AMap.Pixel(5, 5), //图标显示位置偏移量，基准点为图标左上角
};提示
如果想为海量点添加多种点样式，可以将多个样式对象放在数组Array里。
//创建样式对象,JS API 2.0支持显示设置 zIndex, zIndex 越大约靠前，默认按顺序排列
var style = [
{
url: "https://a.amap.com/jsapi_demos/static/images/mass0.png", //图标地址
anchor: new AMap.Pixel(6, 6), //图标显示位置偏移量，基准点为图标左上角
size: new AMap.Size(11, 11), //图标的尺寸
zIndex: 3, //每种样式图标的叠加顺序，数字越大越靠前
},
{
url: "https://a.amap.com/jsapi_demos/static/images/mass1.png",
anchor: new AMap.Pixel(4, 4),
size: new AMap.Size(7, 7),
zIndex: 2,
},
//, …,{}, …
];数据集设置
var data = [
{
lnglat: [116.397455,39.909187], //经纬度
name: "天安门",
},
{
lnglat: [116.402394,39.937182],
name: "南锣鼓巷",
},
//, …,{}, …
];提示
根据样式索引设置不同样式
var data = [
{
lnglat: [116.397455,39.909187], //经纬度
name: "天安门",
style: 0, //该数据的取值为样式数组对应的对象索引
},
{
lnglat: [116.402394,39.937182],
name: "南锣鼓巷",
style: 1,
},
//, …,{}, …
];创建海量点实例
var massMarks = new AMap.MassMarks(data,{
zIndex: 5, //海量点图层叠加的顺序
zooms: [3, 19], //在指定地图缩放级别范围内展示海量点图层
style: style, //设置样式对象
});4
1.4 将 massMarks 添加到地图实例
massMarks.setMap(map);2、本章涉及的属性及方法说明
2.1 AMap.MassMarks(data,opts)
