Popup
继承Evented。 弹出气泡组件。
示例
var popup = new mapboxgl.Popup({closeOnClick: false})
.setLngLat( [116.45, 39.9])
.setHTML('<h1>Hello World!</h1>')
.addTo(map);
构造函数
var pop=new Popup(options: Object?)
pop.addTo(map);
构造选项
| 选项名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| closeButton | boolean | true | 如果为true，会在右上角显示一个关闭按钮 |
| closeOnClick | boolean | true | 如果为true，点击地图时会关闭该气泡 |
| anchor | string? | 气泡指定坐标相对气泡的位置，可取'center' , 'top' , 'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' , 'bottom-right' | |
| offset | PointLike | 气泡指定位置的像素偏移量 | |
| className | 气泡CSS样式 | ||
| maxWidth | string | '240px' | 气泡最大宽度 |
方法
| 方法 | 返回值 | 描述 |
|---|---|---|
| addTo(map:Map) | this | 将气泡添加到地图上 |
| isOpen() | boolean | 气泡是否打开 |
| remove() | this | 将气泡从地图上移除 |
| getLngLat() | LngLat | 获取气泡坐标 |
| setLngLat(lnglat:LngLat) | 设置气泡坐标 | |
| getElement() | HTMLElement | 返回气泡的 HTML element |
| setText(text:string) | 设置气泡文本 | |
| setHTML(html:string) | 设置气泡HTML 对象 | |
| getMaxWidth() | string | 获取气泡最大宽度 |
| setMaxWidth(maxWidth:string) | 设置气泡最大宽度 | |
| setDOMContent(htmlNode:HTMLNode) | 设置气泡DOM对象 |
事件
| 事件名称 | 数据 | 描述 |
|---|---|---|
| open | Popup | 气泡打开时触发该事件 |
| close | Popup | 气泡关闭时触发该事件 |