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
|