标记

标记（Marker）本质上一个指定了地理坐标的HTML元素，这个HTML元素可以包含任意内容。

wmapgl默认显示图片元素，开发人员可以根据自己的需要使用其他HTML元素,

向地图上添加标记

建立一个简单的 Marker 标记，需要设置 DOM 元素、Marker 坐标、偏移量等参数，并将其添加到地图上。

第1步，创建 DOM 元素：

var el = document.createElement("div");
el.id = "marker";
el.style["background-image"] = "url('../images/marker.png')";
el.style["background-size"] = "cover";
el.style.width = "50px";
el.style.height = "50px";
el.style["border-radius"] = "50%";

第2步，添加标记：

// Marker构造函数接收两个参数，一个为自定义的DOM元素，一个是Object参数，其中包括偏移量等
// offset参数为标注点相对于其左上角偏移像素大小
// 调用setLngLat方法指定Marker的坐标位置
var marker = new wmapgl.Marker(el, {offset: [-25, -25]}).setLngLat([116.46, 39.92]).addTo(map);

详见 创建Marker、 Marker属性、 自定义Marker。

删除标记

marker.remove();
marker = null;

标记事件

Marker内置拖拽事件。要想支持拖拽，需要将draggable属性设置为true。

let marker = new wmapgl.Marker({
        draggable: true  //设置为true，marker才支持拖拽
    })
    .setLngLat(map.getCenter())
    .addTo(map);

marker.on("dragstart", (e) => {
    console.log("开始拖拽");
    console.log(e);
});
marker.on("drag", (e) => {
    console.log("正在拖拽");
    console.log(e);
});
marker.on("dragend", (e) => {
    console.log("拖拽结束");
    console.log(e);
});

如果想绑定其他事件可以直接使用DOM元素的addEventListener()方法。

marker.getElement().addEventListener("click", (e) => {
    console.log("点击marker");
    console.log(e);
})

详见Marker事件。