标记

标记(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);

详见 创建MarkerMarker属性自定义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事件

results matching ""

    No results matching ""