Icon 类

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

构造函数

构造函数	描述
Icon(url: String, size: Size, opts: IconOptions)	以给定的图像地址和大小创建图标对象实例

IconOptions

属性	类型	描述
anchor	Size	图标的定位点相对于图标左上角的偏移值
size	Size	图标可视区域的大小
imageOffset	Size	图标所用的图片相对于可视区域的偏移值，此功能的作用等同于 CSS 中的 background-position 属性
imageSize	Size	图标所用的图片的大小，此功能的作用等同于 CSS 中的 background-size 属性。可用于实现高清屏的高清效果
imageUrl	String	图标所用图像资源的位置
printImageUrl	String	设置 icon 打印图片的 url，该打印图片只针对 IE6 有效，解决 IE6 使用 PNG 滤镜导致的错位问题。如果您的 icon 没有使用 PNG 格式图片或者没有使用 CSS Sprites 技术，则可忽略此配置

方法

方法	返回值	描述
setImageUrl(imageUrl: String)	none	设置图片资源的地址
setSize(size: Size)	none	设置图标可视区域的大小
setImageSize(offset: Size)	none	设置图标的大小
setAnchor(anchor: Size)	none	设置图标定位点相对于其左上角的偏移值
setImageOffset(offset: Size)	none	设置图片相对于可视区域的偏移值

示例

// 创建图标对象
var icon = new BMapGL.Icon(
    "marker.png",                      // 图标地址
    new BMapGL.Size(32, 32),          // 图标大小
    {
        // 设置图标的偏移值
        anchor: new BMapGL.Size(16, 32),
        // 设置图片大小，用于高清屏显示
        imageSize: new BMapGL.Size(64, 64)
    }
);

// 使用图标创建标注
var marker = new BMapGL.Marker(point, {
    icon: icon
});

// 动态修改图标属性
icon.setImageUrl("new-marker.png");    // 更换图片
icon.setSize(new BMapGL.Size(48, 48)); // 修改大小
icon.setAnchor(new BMapGL.Size(24, 48)); // 修改偏移

常见用途

1. 自定义标注图标

var icon = new BMapGL.Icon("custom.png", new BMapGL.Size(32, 32));

2. 使用精灵图

var icon = new BMapGL.Icon("sprites.png", new BMapGL.Size(32, 32), {
    imageOffset: new BMapGL.Size(-32, 0)  // 使用精灵图中的第二个图标
});

注意事项

1. size 参数决定了图标的可视区域大小
2. imageSize 属性可用于适配高清屏显示，通常设置为 size 的 2 倍
3. anchor 用于调整图标与地理位置的对应关系，默认为图标中心点
4. 使用精灵图时，需要通过 imageOffset 设置正确的偏移值
5. printImageUrl 主要用于解决 IE6 的兼容性问题，现代浏览器可忽略
6. 图标支持动态修改，所有属性都可以通过对应的 set 方法更新