mirror of https://gitee.com/antv-l7/antv-l7
84 lines
1.8 KiB
Markdown
84 lines
1.8 KiB
Markdown
|
---
|
|||
|
|
title: Marker
|
|||
|
|
order: 3
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
Marker 地图标注 目前只支持2D dom标注
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 构造函数
|
|||
|
|
Marker<br />`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
|
|||
|
|
- offset `Array` 偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 方法
|
|||
|
|
|
|||
|
|
#### setLnglat
|
|||
|
|
设置marker经纬度位置
|
|||
|
|
|
|||
|
|
#### addTo
|
|||
|
|
将marker添加到地图Scene
|
|||
|
|
|
|||
|
|
#### remove
|
|||
|
|
移除marker
|
|||
|
|
|
|||
|
|
#### getElement
|
|||
|
|
获取marker dom Element
|
|||
|
|
|
|||
|
|
#### getLngLat
|
|||
|
|
获取marker经纬度坐标
|
|||
|
|
|
|||
|
|
#### togglePopup
|
|||
|
|
开启或者关闭marker弹出框
|
|||
|
|
|
|||
|
|
#### setPopup
|
|||
|
|
为marker设置popup
|
|||
|
|
|
|||
|
|
#### getPopup
|
|||
|
|
获取marker弹出框
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 示例代码
|
|||
|
|
|
|||
|
|
#### 默认Marker
|
|||
|
|
**<br />` const marker = new L7.Marker({color:'blue'})`
|
|||
|
|
|
|||
|
|
|
|||
|
|
#### 自定义Marker
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
var el = document.createElement('label');
|
|||
|
|
el.className = 'lableclass';
|
|||
|
|
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)
|
|||
|
|
.addTo(scene);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|