Question

我使用leaflet styled layer control plug in自定义地图控件。

我试图在控件的右上角添加一个按钮来关闭控件（主要用于移动设备）。

我找到this question并且它有效，但现在我想知道如何定位此按钮。我希望它在控件的右上角。

当我定位班级＆＃34;传单控制关闭＆＃34;它工作（我测试了＆＃34;位置：相对;浮动：右;＆＃34;它确实浮动但保持在底部），但如果我在页面顶部给它一个绝对位置似乎出现在我的叠加层后面。

我希望它能够将叠加层向下推一点，以便它不会重叠。

编辑：here is a jsfiddle显示正在发生的事情。这有点令人费解，因为样式化的图层控件文件没有CDN所以我只是粘贴在CSS和javascript中。我做了一个注释，我在原始Javascript中添加了按钮，在JS下面是创建地图和叠加层的JS。

我知道桌面上的按钮有点烦人，因为当你用它关闭控件时，它会立即弹回，因为你的鼠标正在盘旋。在我的实际代码中，如果屏幕宽度大于平板电脑尺寸，我将显示设置为无，因为这是我觉得我需要按钮的唯一时间。

我自定义了样式化图层控件javascript以包含按钮：

L.Control.StyledLayerControl = L.Control.Layers.extend({

    onAdd: function(map) {
        this._initLayout();
        this._update();
        this._addButton();

        map
            .on('layeradd', this._onLayerChange, this)
            .on('layerremove', this._onLayerChange, this);

        return this._container;
    },

    _addButton: function () {
      var elements = this._container.getElementsByClassName('leaflet-control-layers-list');
      var button = L.DomUtil.create('button', 'layer-control-close', elements[0]);
      button.innerText = 'Close control';
      L.DomEvent.on(button, 'click', function(e){
        L.DomEvent.stop(e);
        this._collapse();
      }, this);
    }
)};

小叶层控件内的定位按钮

0 个答案: