antv-l7/docs/api/component/popup.en.md

97 lines
1.2 KiB
Markdown
Raw Normal View History

2019-11-21 13:06:13 +08:00
---
title: Popup
order: 4
---
2019-12-02 15:16:45 +08:00
2019-11-21 13:06:13 +08:00
# popup
地图标注信息窗口,用于展示地图要素的属性信息
## 构造函数
2019-12-02 15:16:45 +08:00
2019-11-21 13:06:13 +08:00
Popup
```javascript
2019-12-02 15:16:45 +08:00
const popup = new L7.Popup(option);
2019-11-21 13:06:13 +08:00
```
#### option
- closeButton
- closeOnClick
- maxWidth
- anchor
## 方法
#### setLnglat
2019-12-02 15:16:45 +08:00
设置 popup 的经纬度位置<br />**参数**lnglat 经纬度数组 [112,32]
2019-11-21 13:06:13 +08:00
```javascript
popup.setLnglat([112, 32]);
```
#### addTo
2019-12-02 15:16:45 +08:00
**参数**scene 地图 scene 实例
将 popup 添加到地图 scene 显示
2019-11-21 13:06:13 +08:00
```javascript
popup.addTo(scene);
```
#### setHtml
2019-12-02 15:16:45 +08:00
2019-11-21 13:06:13 +08:00
**参数**html 字符串
2019-12-02 15:16:45 +08:00
设置 popup html 内容
2019-11-21 13:06:13 +08:00
```javascript
2019-12-02 15:16:45 +08:00
var html =
'<p>\u7701\u4EFD\uFF1A' +
feature.s +
'</p>\n <p>\u5730\u533A\uFF1A' +
feature.m +
'</p>\n <p>\u6E29\u5EA6\uFF1A' +
feature.t +
'</p>\n ';
2019-11-21 13:06:13 +08:00
popup.setHtml(html);
```
#### setText
2019-12-02 15:16:45 +08:00
2019-11-21 13:06:13 +08:00
设置 popup 显示文本内容
```javascript
popup.setText('hello world');
```
#### remove
2019-12-02 15:16:45 +08:00
移除 popup
2019-11-21 13:06:13 +08:00
```javascript
2019-12-02 15:16:45 +08:00
popup.remove();
2019-11-21 13:06:13 +08:00
```
## 事件
#### close
```javascript
2019-12-02 15:16:45 +08:00
popup.on('close', () => {});
2019-11-21 13:06:13 +08:00
```
## 示例代码
2019-12-02 15:16:45 +08:00
#### 添加 popup
2019-11-21 13:06:13 +08:00
```
var html = '<p>'+feature.m+'</p>';
const new L7.Popup().setLnglat([112, 32]).setHTML(html).addTo(scene);
```
### FAQ