此类表示标注覆盖物所使用的图标。

构造函数

  • 以给定的图像地址和大小创建图标对象实例

    参数类型说明
    urlstring图片资源地址
    sizeSize图标可视区域的大小
    opts 可选IconOptions可选参数
    属性类型说明
    anchorSize图标的定位锚点,相对于图标左上角的偏移值。 例如Icon大小为30x30,设置为 new Size(15, 30) 表示以底边中心作为锚点
    imageOffsetSize图片相对于可视区域的偏移值,等同于 CSS background-position。 在使用 CSS Sprites 时,通过此属性设置切图在逻辑大小(imageSize)上的位置起始点
    imageSizeSize图标所用图片的大小,等同于 CSS background-size。 用于设置图片的逻辑大小,配合 imageOffset 实现 CSS Sprites 切图; 也可用于高清屏适配(设置为实际图片尺寸的一半)

    返回值 Icon

    示例代码1

    const icon = new BMap.Icon(
    'https://jsapi-demo.bj.bcebos.com/images/markers/marker_demo_1.png',
    new BMap.Size(30, 30)
    );
    const marker = new BMap.Marker(new BMap.Point(116.404, 39.915), { icon });
    map.addOverlay(marker);

    示例代码2:使用 CSS Sprites

    // 原图是一个均匀九宫格图片,大小为300*300
    // 通过 imageSize 设置其逻辑大小为 90*90
    // 通过 imageOffset 设置切图在逻辑大小上的位置起始点,(60,0)对应第一行第三个图标
    // 通过 anchor 设置图标在地图上显示的锚点,(15,30)以图片底边中心作为锚点
    const icon = new BMap.Icon(
    'https://jsapi-demo.bj.bcebos.com/images/markers/marker_demo_all.png',
    new BMap.Size(30, 30),
    { imageOffset: new BMap.Size(60, 0), imageSize: new BMap.Size(90, 90), anchor: new BMap.Size(15, 30) }
    );

属性

图标的定位锚点相对于图标左上角的偏移值

图标图片相对于可视区域的偏移值,等同于 CSS background-position

图标图片的实际大小,等同于 CSS background-size

图标图片资源的 URL

图标可视区域的大小

方法

  • 设置图标定位锚点相对于图标左上角的偏移值

    参数类型说明
    anchorSize偏移值

    返回值 void

    示例代码1

    icon.setAnchor(new BMap.Size(16, 32));
    
  • 设置图片相对于可视区域的偏移值(等同于 CSS background-position),用于 Sprites 切图定位

    参数类型说明
    offsetSize偏移值

    返回值 void

    示例代码1

    // 在逻辑大小 90x90 的九宫格图上,偏移到第一行第三个图标位置
    icon.setImageOffset(new BMap.Size(60, 0));
  • 设置图标图片的实际大小(等同于 CSS background-size),用于设置图片逻辑大小

    参数类型说明
    offsetSize图片实际大小

    返回值 void

    示例代码1

    // 原图 300x300,设置逻辑大小为 90x90 以配合 Sprites 切图
    icon.setImageSize(new BMap.Size(90, 90));
  • 设置图片资源的地址

    参数类型说明
    imageUrlstring图片 URL

    返回值 void

    示例代码1

    icon.setImageUrl('https://jsapi-demo.bj.bcebos.com/images/markers/marker_demo_2.png');
    
  • 设置图标可视区域的大小

    参数类型说明
    sizeSize大小

    返回值 void

    示例代码1

    icon.setSize(new BMap.Size(48, 48));