弹出气泡

弹出气泡本质上也是一个指定了地理坐标的HTML元素，通常用来显示详细信息。

添加气泡

Popup 初始化时可以设置以下参数：

• （1）closeButton，true表示会展示一个关闭按钮；
• （2）closeOnClick，设置为true表示当地图被点击时该气泡会被关闭；
• （3）offset，参数为点位置相对于其左上角偏移像素大小；
• （4）anchor，停靠点，值域为[top,bottom,left,right,top-left,top-right,bottom-left,bottom-right]，如果不设置该参数，则会根据map container动态调整。

Popup 添加信息内容有以下几种方式：

方式1：文本类型，通过setText方法添加，添加文本类型则无法改变文本样式；

var popup = new wmapgl.Popup({closeOnClick: true, closeButton: true, anchor: "left", offset: [0, 0]})
    .setLngLat([116.46, 39.92])
    .setText("我是一个信息窗体")
    .addTo(map);

方式2：DOM类型，通过setDOMContent方法添加，可以通过DOM自定义样式；

var el = document.createElement("div");
el.className = "custom-popup-class"; //custom-popup-class为自定义的css类名
var d1 = document.createElement("div");
d1.innerHTML = "<span>我是一个信息窗体</span>";
d1.style.color = "black";
el.appendChild(d1);

var popup = new wmapgl.Popup({closeOnClick: true, closeButton: true, offset: [0, 0]})
    .setLngLat([116.46, 39.92])
    .setDOMContent(el)
    .addTo(map);

方式3：HTML字符串类型，通过setHTML方法添加，可以通过HTML字符自定义样式。

var popup = new wmapgl.Popup({closeOnClick: true, closeButton: true, offset: [0, 0]})
    .setLngLat([116.46, 39.92])
    .setHTML("<h1>我是一个信息窗体</h1>")
    .addTo(map);

方式4：使用 trackPointer 添加跟随鼠标指针气泡：

var popup = new wmapgl.Popup({closeOnClick: true, closeButton: false, anchor: "top-left", offset: [15, 20]})
    .trackPointer() //此方法可以让popup跟随鼠标指针，使用此方法就不再需要使用setLngLat()方法
    .addTo(map);

详见示例。

关联Marker

可以将Popup绑定到Marker上，点击Marker时会自动显示气泡。

let popup = new wmapgl.Popup({offset: 25}).setText(
    'Hello World!'
);
let marker = new wmapgl.Marker()
    .setLngLat(map.getCenter())
    .setPopup(popup)
    .addTo(map);

详见示例。

删除气泡

信息窗体的删除是通过 popup 对象的 remove 方法实现的。

popup.remove();
popup = null;

事件交互

Popup内置close和open事件。

popup.on("close", (e) => {
    console.log("关闭气泡");
    console.log(e);
});

popup.on("open", (e) => {
    console.log("打开气泡");
    console.log(e);
});

也可以直接获取Popup内部的HTML元素，调用HTML元素的addEventListener()方法监听更多的事件。

详见示例Popup事件。