javascript - Mapbox事件监听器

我在MapBox map 中添加了自定义按钮，它们可以正确购物。然而
当我添加点击监听器时，它不起作用。我在控制台中看不到任何错误。

代码如下:

const currentLocationControl = new CustomControl('current-location-control', 'GPS');

this.map.addControl(currentLocationControl, 'top-left');

document.getElementById('test').addEventListener('click', function (e) {
    alert('test');
});

我从mounted在vue.js方法中执行此代码。

CustomControl:

export default class CustomControl {

    constructor(className, text) {
        this.className = className;
        this.text = text;
    }

    onAdd(map){
        this.map = map;
        this.container = document.createElement('div');
        this.container.id = 'test';
        this.container.className = this.className;
        this.container.textContent = this.text;
        return this.container;
    }
    onRemove(){
        this.container.parentNode.removeChild(this.container);
        this.map = undefined;
    }
}

当我console.log(document.getElementById('test'));时，我在控制台(测试div)中看到了预期的结果。



那么这可能是怎么回事？

最佳答案

取决于map.addControl的工作方式，很可能该元素尚不存在。

也许，如果您在CustomControl中创建了一个返回容器的方法，而不是使用document.getElementById而不是currentLocationControl.getContainer()，您会使用吗？

或者在您的setAction中添加一个CustomControl，例如

setAction(action) {
    this.container.addEventListener('click', action);
}

关于javascript - Mapbox事件监听器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49709971/