InfoWindow 类

此类表示地图上包含信息的窗口。

构造函数

构造函数	描述
InfoWindow(content: String | HTMLElement, opts: InfoWindowOptions)	创建一个信息窗实例，其中 content 支持 HTML 内容

InfoWindowOptions

此类表示 InfoWindow 构造函数的可选参数，它没有构造函数，但可通过对象字面量形式表示。

属性	类型	描述
width	Number	信息窗宽度，单位像素。取值范围：0, 220 - 730。如果您指定宽度为 0，则信息窗口的宽度将按照其内容自动调整
height	Number	信息窗高度，单位像素。取值范围：0, 60 - 650。如果您指定高度为 0，则信息窗口的高度将按照其内容自动调整
maxWidth	Number	信息窗最大化时的宽度，单位像素。取值范围：220 - 730
offset	Size	信息窗位置偏移值。默认情况下在地图上打开的信息窗底端的尖角将指向其地理坐标，在标注上打开的信息窗底端尖角的位置取决于标注所用图标的 infoWindowOffset 属性值，您可以为信息窗添加偏移量来改变默认位置
title	String	信息窗标题文字，支持 HTML 内容
enableAutoPan	Boolean	是否开启信息窗口打开时地图自动移动（默认开启）
enableCloseOnClick	Boolean	是否开启点击地图关闭信息窗口（默认开启）

方法

方法	返回值	描述
setWidth(width: Number)	none	设置信息窗口的宽度，单位像素。取值范围：220 - 730
setHeight(height: Number)	none	设置信息窗口的高度，单位像素。取值范围：60 - 650
redraw()	none	重绘信息窗口，当信息窗口内容发生变化时进行调用
setTitle(title: String | HTMLElement)	none	设置信息窗口标题。支持 HTML 内容。1.2 版本开始 title 参数支持传入 DOM 结点
getTitle()	String | HTMLElement	返回信息窗口标题
setContent(content: String | HTMLElement)	none	设置信息窗口内容。支持 HTML 内容。1.2 版本开始 content 参数支持传入 DOM 结点
getContent()	String | HTMLElement	返回信息窗口内容
getPosition()	Point	返回信息窗口的位置
enableMaximize()	none	启用窗口最大化功能。需要设置最大化后信息窗口里的内容，该接口才生效
disableMaximize()	none	禁用窗口最大化功能
isOpen()	Boolean	返回信息窗口的打开状态
setMaxContent(content: String)	none	信息窗口最大化时所显示内容，支持 HTML 内容
maximize()	none	最大化信息窗口
restore()	none	还原信息窗口
enableAutoPan()	none	开启打开信息窗口时地图自动平移
disableAutoPan()	none	关闭打开信息窗口时地图自动平移
enableCloseOnClick()	none	开启点击地图时关闭信息窗口
disableCloseOnClick()	none	关闭点击地图时关闭信息窗口
addEventListener(event: String, handler: Function)	none	添加事件监听函数
removeEventListener(event: String, handler: Function)	none	移除事件监听函数

事件

事件	参数	描述
close	{type: string, target: any, point: Point}	信息窗口被关闭时触发此事件
open	{type: string, target: any, point: Point}	信息窗口被打开时触发此事件
maximize	{type: string, target: any}	信息窗口最大化后触发此事件
restore	{type: string, target: any}	信息窗口还原时触发此事件
clickclose	{type: string, target: any}	点击信息窗口的关闭按钮时触发此事件

示例

// 创建信息窗口
var infoWindow = new BMapGL.InfoWindow(
    "这是一个信息窗口", // 内容
    {
        width: 300,     // 宽度
        height: 200,    // 高度
        title: "标题",  // 标题
        enableAutoPan: true  // 自动平移
    }
);

// 在地图上打开信息窗口
map.openInfoWindow(infoWindow, new BMapGL.Point(116.404, 39.915));

// 设置信息窗口内容
infoWindow.setContent(`
    <div>
        <h4>详细信息</h4>
        <p>这里是详细内容</p>
        <img src="example.jpg" />
    </div>
`);

// 监听事件
infoWindow.addEventListener('close', function(e) {
    console.log('信息窗口已关闭', e.point);
});

常见用途

1. 显示标注点详细信息

marker.addEventListener('click', function(e) {
    var info = new BMapGL.InfoWindow("标注点详细信息");
    map.openInfoWindow(info, e.point);
});

2. 使用自定义 DOM 内容

var content = document.createElement('div');
content.innerHTML = '<h4>自定义内容</h4>';
var info = new BMapGL.InfoWindow(content, {
    title: '自定义标题'
});

注意事项

1. 信息窗口的宽度和高度有取值范围限制
2. 内容支持 HTML 字符串或 DOM 元素
3. 可以通过 enableAutoPan 控制窗口打开时是否自动平移地图
4. 窗口最大化功能需要先设置最大化内容才能生效
5. 事件监听器的参数中包含了事件类型、目标对象和地理位置信息
6. 可以通过 enableCloseOnClick 控制是否允许点击地图关闭窗口