CustomOverlay

自定义覆盖物，通过 DOM 元素实现自定义内容展示。

构造函数

  • 创建自定义覆盖物

    参数类型说明
    domCreateFunctionDOM 创建函数，返回覆盖物 DOM 元素，函数内可通过 this 访问覆盖物实例
    options 可选CustomOverlayOptions可选参数
    属性类型说明
    anchorsnumber | number锚点，左上角为 [0, 0]，取值范围 [0, 1]
    autoFollowHeadingChangedboolean是否随地图旋转
    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);

方法

  • 返回覆盖物的地理坐标点

    返回值 Point

  • 返回自定义业务属性

    返回值 any

  • 返回覆盖物旋转角度

    返回值 number

  • 设置覆盖物的地理坐标点

    参数类型说明
    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);