antv-l7/marker.zh.md at aabb45159b1921cd80ed2cbdd182dccce71f8055

2.1 KiB

Raw Blame History

title	order
Marker	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
offset Array 偏移量 [ 0, 0 ] 分别表示 X, Y 的偏移量
extData 用户自定义属性，支持任意数据类型，存储 marker 属性信息

方法

setLnglat

设置 marker 经纬度位置

addTo

将 marker 添加到地图 Scene

remove

移除 marker

getElement

获取 marker dom Element

getLngLat

获取 marker 经纬度坐标

togglePopup

开启或者关闭 marker 弹出框

setPopup

为 marker 设置 popup

getPopup

获取 marker 弹出框

getExtData()

获取用户自定义数据

setExtData(data)

设置用户自定义数据

示例代码

默认 Marker

const marker = new L7.Marker({color:'blue'})

自定义 Marker

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);

var popup = new L7.Popup({
  anchor: 'left',
}).setText(item.name);

new L7.Marker({
  element: el,
})
  .setLnglat(item.coordinates)
  .setPopup(popup)
  .addTo(scene);

事件

鼠标事件

mousemove
click
mousedown
mouseup
dblclick
contextmenu
mouseover
mouseout

事件返回数据

target 事件触发源
data extData 用户自定义数据
lnglat marker 经纬度

marker.on('click', (e) => {});

demo 地址

demo1

2.1 KiB Raw Blame History