Question

如何使用JS代码关闭Leaflet JS层控件？在桌面上，当鼠标光标离开控件时，控件会很好地关闭。但是，在手机上，用户需要在控件外部轻敲以关闭它。我想在用户选择控件内的图层后手动关闭它。

Answer 1

此控件的状态由leaflet-control-layers-expanded类控制。如果向leaflet-control-layers元素添加或删除此类，则可以控制状态。

这些示例使用jQuery来简化。

扩展控件：

$(".leaflet-control-layers").addClass("leaflet-control-layers-expanded")

要折叠控件：

$(".leaflet-control-layers").removeClass("leaflet-control-layers-expanded")

Answer 2

对于移动设备，我只需在div中添加一个关闭按钮，然后使用js更改上面提到的类：

请注意，我在这里更改了传单源代码，但外部也应该可行。在传单源中的行container.appendChild(form);之前添加以下代码 - 使用0.7.7进行测试

if (L.Browser.android || L.Browser.mobile || L.Browser.touch || L.Browser.retina) {
    var yourCloseButton = this.yourCloseButton = L.DomUtil.create('div', className + '-close');
    this.yourCloseButton = L.DomUtil.create('div', className + '-close', form);
    this.yourCloseButton.innerHTML = '<button class="btn-close-layers-control">X</button>'; 
L.DomEvent.on(this.yourCloseButton, 'click', this._collapse, this);  
}

`然后用css定位按钮。

以编程方式折叠Leaflet JS层控件

2 个答案: