Mapbox 事件监听器答案

【问题标题】：Mapbox event listenerMapbox 事件监听器
【发布时间】：2018-09-17 11:54:20
【问题描述】：

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

代码如下所示：

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

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

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

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

自定义控件：

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）中看到了预期的结果。

那么这里会发生什么？

【问题讨论】：

这很可能是因为您在 javascript 中构建它，因此当您尝试绑定使用时它在 DOM 中不可用。改为使用最近的静态父元素的事件委托
任何人????!?!?!
你尝试过我告诉你的吗？
@ohgodwhy 它在 vue.js 组件中，所以没有静态父级对吗？感谢您的帮助。
只需在该特定行放置一个断点并检查该元素是否真的存在。此外，可以绑定事件，但按钮可能会出现在地图下方，因此您实际上单击的是地图而不是按钮。你有正确的 z 索引吗？

标签： javascript vue.js mapbox

【解决方案1】：

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

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

或者在你的CustomControl 中添加一个setAction

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

【讨论】：

【解决方案2】：

为确保单击事件绑定到正确的元素，您可以改为在类声明中绑定事件。

将点击事件的回调传递给自定义控件

const clickCallback = function(e) {
  alert(test);
};

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

类声明：

// add clickCallback to constructor
export default class CustomControl {
  constructor(className, text, clickCallback) {
    //...
  }

  onAdd(map) {
    //...
    this.container.onclick = clickCallback;
    //...
  }
}

【讨论】：

@Jenssen 我可以知道你是如何实现它的吗？我很好奇为什么它不起作用