小编asy*_*ync的帖子

如何在Mapboxgl中使用事件创建我的自定义控件?

使用mapboxgl,我添加了一个自定义地图控件,该控件可以执行一些特殊功能,并使用基本功能引用了Office示例。但是,当我完成代码后,我发现按钮的事件单击不起作用。我添加了stopPropagation函数。那么如何在mapbox控件中添加click事件呢?

mapboxgl.accessToken = 'pk.eyJ1IjoieGlhb2thbmciLCJhIjoiY2lqc2d2NXlyMGhkbHU0bTVtcGNiOWxseCJ9.J5qsX13KKNT1slMGS-MOLg';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
    center: [-74.50, 40], // starting position [lng, lat]
    zoom: 9 // starting zoom
});

class ToggleControl {
  onAdd(map){
    this.map = map;
    this.container = document.createElement('div');
    this.container.className = 'my-custom-control';

    const button = this._createButton('monitor_button')
    this.container.appendChild(button);
    return this.container;
  }
  onRemove(){
    this.container.parentNode.removeChild(this.container);
    this.map = undefined;
  }
  _createButton(className) {
    const el = window.document.createElement('button')
    el.className = className;
    el.textContent = 'toggleControl';
    el.addEventListener('click',(e)=>{
      e.style.display = 'none'
      console.log(e);
      // e.preventDefault()
      e.stopPropagation() …
Run Code Online (Sandbox Code Playgroud)

javascript css mapbox-gl-js

2
推荐指数
1
解决办法
924
查看次数

标签 统计

css ×1

javascript ×1

mapbox-gl-js ×1