Icon
构造函数
以给定的图像地址和大小创建图标对象实例
参数 类型 说明 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
图标可视区域的大小
方法
设置图片相对于可视区域的偏移值(等同于 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');
此类表示标注覆盖物所使用的图标。