| 海量标注 | 您所在的位置：网站首页 › 高德地图上标记民宿需要花钱吗 › 海量标注 |
|
当需要展示海量点标记时，可以使用海量标注AMap.LabelMarker代替AMap.Marker。AMap.LabelMarker不仅可以绘制图标，还可以为图标添加文字信息，样式配置等。 海量标注示例亲手试一试 下载完整代码 提示相比于Marker， LabelMarker支持避让功能，它不仅支持LabelMarker之间的避让，JS API 2.0 版本还支持地图底图标注避让，可以让您的Marker更加明显。 1、海量标注 LabelMarker创建一个标注对象，首先要设置标注的位置，同时还可以通过 icon 和 text 属性设置图标和文字（也可以缺省）。 11.1 准备成为开发者并创建 key为了正常调用 API ，请先注册成为高德开放平台开发者，并申请 web 平台（JS API）的 key 和安全密钥，点击 具体操作。 提示你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。 21.2 创建地图const map = new AMap.Map("container", { zoom: 10, //地图级别 center: [116.397428, 39.90923], //地图中心点 mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式 viewMode: "2D", //设置地图模式 });前往展示地图，了解完整地图创建 31.3 创建 LabelsLayer 图层LabelsLayer 图层是用于承载 LabelMarker 标记的图层，因此所有创建的 LabelMarker标记都需要添加到 LabelsLayer 图层上才能最终展示在地图上。 const labelsLayer = new AMap.LabelsLayer({ zooms: [3, 20], zIndex: 1000, collision: true, //该层内标注是否避让 allowCollision: true, //不同标注层之间是否避让 });提示collision属性控制同一个LabelsLayer标注层内的LabelMarker标注是否避让 allowCollision属性控制不同的LabelsLayer标注层之间的LabelMarker标注是否避让，JS API 2.0也可控制LabelMarker标注对地图底图图层标注的避让。 41.4 设置一个图标对象//设置一个图标对象 const icon = { type: "image", //图标类型，现阶段只支持 image 类型 image: "https://a.amap.com/jsapi_demos/static/demo-center/marker/express2.png", //可访问的图片 URL size: [64, 30], //图片尺寸 anchor: "center", //图片相对 position 的锚点，默认为 bottom-center };查看anchor属性教程 51.5 设置文字对象//设置文字对象 const text = { content: "中邮速递易", //要展示的文字内容 direction: "right", //文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置 offset: [-20, -5], //在 direction 基础上的偏移量 //文字样式 style: { fontSize: 12, //字体大小 fillColor: "#22886f", //字体颜色 strokeColor: "#fff", //描边颜色 strokeWidth: 2, //描边宽度 }, };查看offset属性教程 61.6 创建 LabelMarker 标记//创建 LabelMarker const labelMarker = new AMap.LabelMarker({ name: "标注", //此属性非绘制文字内容，仅为标识使用 position: [116.466994, 39.984904], zIndex: 16, rank: 1, //避让优先级 icon: icon, //标注图标，将 icon 对象传给 icon 属性 text: text, //标注文本，将 text 对象传给 text 属性 });注意若无需同时展示图标与文字，你可以根据需要省略相应的参数。但至少需上传“图标(icon)”或“文字(text)”中的一项。 提示当LabelsLayer图层开启避让（collision:true）时，若两个LabelMarker标记发生重叠，rank值较高的LabelMarker标记将显示，而值较低的会被隐藏。 查看LabelMarker全部属性和方法 71.7 将 LabelMarker 标记添加到 LabelsLayer 图层上将上面第四步已创建的 LabelMarker 对象添加到 第三步创建的 LabelsLayer 图层 //添加一个 labelMarker labelsLayer.add(labelMarker);提示批量添加 labelMarkerlabelsLayer.add([labelMarker1, labelMarker2])移除 LabelMarkerlabelsLayer.remove(labelMarker)批量移除 labelMarkerlabelsLayer.remove([labelMarker1, labelMarker2])81.8 将 LabelsLayer 添加到地图实例map.add(labelsLayer);91.9 为 LabelMarker 添加事件LabelMarker 与其它覆盖物添加事件的方式一致，使用on() 的方式添加事件 labelMarker.on('click', function(e){ labelMarker.setOpacity(0.5); });2、本章涉及的属性及方法说明2.1 AMap.LabelsLayer参数/方法 说明 类型 参数值描述 zooms 标注层展示层级范围 Array - zIndex 标注层与其它图层的叠加顺序 Number - collision 标注层内的标注是否避让 Boolean true | false allowCollision 标注层内的标注是否允许其它标注层对它避让 Boolean true | false labelsLayer.add() 将labelMarker添加到标注层上 Function 添加单个标注或标注数组 labelsLayer.remove() 将labelMarker从标注层上移除 Function 可移除单个标注或标注数组 查看所有AMap.LabelsLayer属性和方法 2.2 AMap.LabelMarker参数/方法 说明 类型 参数值描述 name 标注名称 String 作为标注标识使用 position 标注位置 AMap.LngLat| Array 经纬度对象或经纬度构成的一维数组。例如： AMap.LngLat(116.39,39.9) | [116.39, 39.9] zIndex 同一LabelsLayer内标注显示层级 Number 数字越大越靠前 rank 避让优先级 Number 优先级用于labelsLayer支持避让时，rank值大的标注会避让掉rank值低的标注 icon 标注图标设置 Object - type 图标类型 String 现阶段只支持image类型 image 图标 url String - size 图标大小 Size - anchor 图标锚点 String 锚点位置对应设置的position位置，详见点标记的锚点位置 text 标注文本设置 Object - content 文本标注的内容 String 该属性为直接显示在标注上的文本内容 direction 文本标注方位，若设置了icon，则direction是以 icon为中心的偏移，若未设置icon，则相对 position偏移 String 可选值：'top'|'right'|'bottom'|'left'|'center' offset 偏移量 Pixel 在direction基础上的偏移 style 文本样式设置 Object - fontSize 文字大小 Number - fillColor 文字颜色 String 使用16进制颜色代码赋值 strokeColor 文字描边颜色 String 使用16进制颜色代码赋值 strokeWidth 描边宽度 Number - 查看所有AMap.LabelMarker属性和方法 |
| CopyRight 2018-2019 实验室设备网 版权所有 |