Question

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

代码如下所示：

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

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

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

我在mounted的{{1}}方法中执行此代码。

CustomControl：

vue.js

当我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; } }时，我在我的控制台（测试div）中看到了预期的结果。

那么可能会发生什么？

Answer 1

要确保click事件绑定到正确的元素，您可以在Class声明中绑定事件。将click事件的回调传递给CustomControl const clickCallback = function（e）{ 警报（测试）; }; const currentLocationControl = new CustomControl（ “电流 - 位置控制”， “全球定位系统”， clickCallback ）; 舱位声明： //将clickCallback添加到构造函数中 export default class CustomControl { 构造函数（className，text，clickCallback）{ // ... } onAdd（地图）{ // ... this.container.onclick = clickCallback; // ... } }

Answer 2

很可能该元素尚不存在，具体取决于map.addControl的工作原理。

也许如果您在CustomControl中创建了一个方法来返回容器，而不是使用document.getElementById，那么您可以使用currentLocationControl.getContainer()之类的内容吗？

或者setAction中的CustomControl

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

Mapbox事件监听器

2 个答案: