AI
产品服务
解决方案
文档与支持
定价
更新时间: 2026/03/12 14:34
自定义覆盖物
简介

为了支持更丰富多彩的地图覆盖物类型,提供自定义覆盖物类 CustomOverlay,支持开发者自定义DOM覆盖物叠加到地图上,比如实现自定义的Canvas、SVG、DOM元素,常用于叠加自定义的表格、图片、文字、GIF动画、视频等 该自定义覆盖物一次只能创建一个覆盖物,如果想要批量创建同类型的覆盖物,可以移步自定义Html覆盖物图层类CustomHtmlLayer,支持根据GeoJSON格式数据进行批量自定义覆盖物叠加。

DEMO详情
自定义canvas覆盖物
自定义DOM覆盖物
类参考

构造函数

名称说明

CustomOverlay(createDom, options: Object)

创建单个自定义DOM覆盖物

参数说明:

参数名类型说明

createDom

HTMLElement

用户自定义创建DOM函数

options

point

Point

覆盖物的经纬度,必填

offsetX

Number

覆盖物水平偏移量

offsetY

Number

覆盖物垂直偏移量

MinZoom

Number

最小显示层级

MaxZoom

Number

最大显示层级

properties

Object

自绑定属性

enableMassClear

Boolean

是否能被统一清除掉覆盖物

enableDraggingMap

Boolean

是否可以在覆盖物位置拖拽地图

方法

方法名参数返回值说明

show()

none

none

显示自定义覆盖物

hide()

none

none

隐藏自定义覆盖物

setPoint

point

none

设置覆盖物新坐标

getPoint

none

point

获取自定义覆盖物坐标

setProperties

object

none

设置覆盖物属性,与初始化的属性增量修改或合并

getProperties

none

object

获取自定义覆盖物的属性

事件
  通过addEventListener(event, callback)方法进行事件绑定,支持如下事件:

事件名说明

click

鼠标点击事件

mouseover

鼠标悬浮事件

mouseout

鼠标移出事件

图层示例
// 创建自定义覆盖物DOM
function createDOM(feature) {
const img = document.createElement('img');
img.style.height = '240px';
img.style.width = '80px';
img.src = 'https://bj.bcebos.com/v1/mapopen-pub-jsapigl/assets/images/fire.gif';
img.draggable = false;
return img;
}
// 创建自定义覆盖物
const customOverlay = new BMapGL.CustomOverlay(createDOM, {
point: new BMapGL.Point(116.40342230333138, 39.92498414216742),
opacity: 0.5,
map: map,
offsetY: -10,
properties: {
title: 'this is a title',
size: '100'
}
});
// 将自定义覆盖物添加到地图上
map.addOverlay(customOverlay);
// 绑定鼠标事件
customOverlay.addEventListener('click', function (e) {
console.log('eeee', e);
});

上一篇

信息窗口

下一篇

地图事件

本篇文章对您是否有帮助?