CustomOverlay
构造函数
创建自定义覆盖物
参数 类型 说明 domCreateFunctionDOM 创建函数，返回覆盖物 DOM 元素，函数内可通过 this访问覆盖物实例options可选CustomOverlayOptions可选参数 属性 类型 说明 anchors[number, number]锚点，左上角为 [0, 0]，取值范围 [0, 1] autoFollowHeadingChangedboolean是否随地图旋转 enableDraggingMapboolean覆盖物上是否允许拖拽地图 enableMassClearboolean是否在 map.clearOverlays() 时被清除 fixBottomboolean是否将 DOM 固定在底部 maxZoomnumber显示的最大缩放级别 minZoomnumber显示的最小缩放级别 offsetXnumberX轴偏移量，单位像素 offsetYnumberY轴偏移量，单位像素 pointPoint覆盖物的地理坐标点 propertiesany自定义业务属性 rotationnumber旋转角度，单位度 rotationInitnumber初始化旋转角度 useTranslateboolean是否使用 translate3d 进行性能优化 visibleboolean是否显示 zIndexnumber层叠顺序 返回值 CustomOverlay
示例代码1
const customOverlay = new BMap.CustomOverlay(
function () {
const div = document.createElement('div');
div.textContent = '自定义内容';
div.style.cssText = 'background:#fff;padding:4px 8px;border-radius:4px;';
return div;
},
{ point: new BMap.Point(116.404, 39.915) }
);
map.addOverlay(customOverlay);
方法
- #addEventListener<K extends keyof CustomOverlayEventMap>(
event: K,
handler: (e: CustomOverlayEventMap[K]) => void,
): void添加事件监听
参数 类型 说明 eventK事件名称 handler(e: CustomOverlayEventMap[K]) => void事件处理函数 返回值 void
draw
- draw(): void
抽象生命周期方法，当地图状态发生变化时调用，对覆盖物进行绘制。
仅在自定义覆盖物时需要实现此方法。内置覆盖物已在内部实现，用户无需调用也无需重写。
返回值 void
返回覆盖物的地理坐标点
返回值 Point
返回自定义业务属性
返回值 any
返回覆盖物旋转角度
返回值 number
hide
- hide(): void
隐藏覆盖物。对于自定义覆盖物，此方法会自动将initialize方法返回的HTML元素样式的display属性设置为none
返回值 void
initialize
抽象生命周期方法，用于初始化覆盖物，当调用map.addOverlay时，API内部将调用此方法。
仅在自定义覆盖物时需要实现此方法，并返回覆盖物对应的HTML元素。 内置覆盖物（
Marker、Polyline、Polygon等）已在内部实现，用户无需调用也无需重写。参数 类型 说明 mapMap返回值 HTMLElement
示例代码1
class MyOverlay extends BMap.Overlay {
initialize(map: BMap.Map) {
const div = document.createElement('div');
div.textContent = '自定义覆盖物';
map.getPanes().markerPane.appendChild(div);
return div;
}
draw() {}
}
is
- isVisible(): boolean
判断覆盖物是否可见
返回值 boolean
设置覆盖物的地理坐标点
参数 类型 说明 pointPoint地理坐标 noReCreate可选boolean是否跳过重新创建 DOM，默认 false 返回值 void
示例代码1
customOverlay.setPoint(new BMap.Point(116.410, 39.920));
设置自定义业务属性
参数 类型 说明 propertiesany属性对象 返回值 void
示例代码1
customOverlay.setProperties({ id: 'store-001', name: '门店A' });
设置覆盖物旋转角度
参数 类型 说明 rotationnumber旋转角度，单位度 返回值 void
示例代码1
customOverlay.setRotation(45);
设置 DOM 覆盖物的初始旋转基准角度（单位：度）。 最终旋转角度 = rotationOrigin + 地图当前朝向（heading），自动跟随地图旋转。
参数 类型 说明 originnumber初始旋转基准角度，负数会自动转为正值，超出 360 取模 返回值 void
示例代码1：设置北偏东 30 度为初始基准
customOverlay.setRotationOrigin(30);示例代码2：清除初始基准（恢复到正北方向）
customOverlay.setRotationOrigin(0);
show
- show(): void
显示覆盖物。对于自定义覆盖物，此方法会自动将initialize方法返回的HTML元素样式的display属性设置为空
返回值 void
自定义覆盖物，通过 DOM 元素实现自定义内容展示。