mirror of https://gitee.com/antv-l7/antv-l7
94 lines
1.6 KiB
Markdown
94 lines
1.6 KiB
Markdown
---
|
||
title: Marker
|
||
order: 3
|
||
---
|
||
|
||
Marker 地图标注 目前只支持 2D dom 标注
|
||
|
||
## 构造函数
|
||
|
||
Marker
|
||
|
||
`const Marker = new L7.Marker(option)`
|
||
|
||
#### option
|
||
|
||
- color `string` 设置默认 marker 的颜色
|
||
- element `Dom|string` 自定义 marker Dom 节点，可以是 dom 实例，也可以是 dom id
|
||
- anchor `string` 锚点位置 支持 center, top, top-left, top-right, bottom, bottom-left,bottom- right,left, right
|
||
- offsets `Array` 偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
|
||
|
||
### 添加到 Scene
|
||
|
||
```javascript
|
||
scene.addMarker(marker);
|
||
```
|
||
|
||
## 方法
|
||
|
||
#### setLnglat
|
||
|
||
设置 marker 经纬度位置
|
||
|
||
#### addTo
|
||
|
||
将 marker 添加到地图 Scene
|
||
|
||
#### remove
|
||
|
||
移除 marker
|
||
|
||
#### getElement
|
||
|
||
获取 marker dom Element
|
||
|
||
#### getLngLat
|
||
|
||
获取 marker 经纬度坐标
|
||
|
||
#### togglePopup
|
||
|
||
开启或者关闭 marker 弹出框
|
||
|
||
#### setPopup
|
||
|
||
为 marker 设置 popup
|
||
|
||
#### getPopup
|
||
|
||
获取 marker 弹出框
|
||
|
||
## 示例代码
|
||
|
||
#### 默认 Marker
|
||
|
||
`const marker = new L7.Marker({color:'blue'})`
|
||
|
||
#### 自定义 Marker
|
||
|
||
```javascript
|
||
var el = document.createElement('label');
|
||
el.className = 'labelclass';
|
||
el.textContent = data[i].v;
|
||
el.style.background = getColor(data[i].v);
|
||
new L7.Marker({
|
||
element: el,
|
||
})
|
||
.setLnglat([data[i].x * 1, data[i].y])
|
||
.addTo(scene);
|
||
```
|
||
|
||
#### 设置 popup
|
||
|
||
```javascript
|
||
var popup = new L7.Popup({
|
||
anchor: 'left',
|
||
}).setText(item.name);
|
||
|
||
new L7.Marker({
|
||
element: el,
|
||
})
|
||
.setLnglat(item.coordinates)
|
||
.setPopup(popup);
|
||
```
|