0

我需要更改工具栏的样式，例如按钮的大小，以便为移动设备提供更大的触摸区域（绘制工具栏和其他控件）。

我已经尝试使用 css 将工具栏按钮的宽度和高度的大小更改为 48px。

当前的CSS：

/*
  ##Device = Mobile, Tablet
*/
@media (max-width: 1024px) {
    .leaflet-bar a, a.leaflet-toolbar-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
        line-height: 45px !important;
    }
    .leaflet-touch .leaflet-draw-actions a {
        font-size: 20px;
        line-height: 44px;
        height: 44px;
    }
    .leaflet-control-zoom-display {
        width: 45px;
        height: 45px;
        font-size: 18px;
        line-height: 30px;
    }
    .leaflet-touch .leaflet-control-layers-toggle {
        width: 44px;
        height: 44px;
    }
}

当我以 css 方式更改大小时，工具栏不再响应（传单绘制工具栏背景应该适合大小）

当您单击工具栏按钮时，它也会出现故障，并显示水平子工具栏（文本重叠）。

我的问题图片

有谁知道一个插件或一种为移动设备提供更大触摸区域的方法？

4

1 回答 1

1

我使用一些 css 解决了我的问题

/*
  ##Devices with touch
*/
.leaflet-touch .leaflet-control-zoom-display {
  width: 48px;
  height: 48px;
  font-size: 18px;
  line-height: 30px;
}
.leaflet-touch .leaflet-bar a, .leaflet-touch .leaflet-toolbar-0 > li > a {
  width: 44px;
  height: 44px;
  font-size: 20px;
  line-height: 45px;
  background-size: 314px 30px;
}
.leaflet-touch .leaflet-draw-toolbar.leaflet-bar a {
  background-position-y: 6px;
}
.leaflet-touch .leaflet-draw-actions a, .leaflet-touch .leaflet-control-toolbar .leaflet-toolbar-1 > li > .leaflet-toolbar-icon {
  font-size: 20px;
  line-height: 44px;
  height: 44px;
}
.leaflet-touch .leaflet-draw-actions, .leaflet-touch .leaflet-toolbar-1 {
  left: 45px;
}

对于使用自定义工具栏插件的人：如果将位置设置为右侧，子工具栏将在右侧（屏幕外）打开解决方法：

.leaflet-right .leaflet-toolbar-1 {
  left: auto !important;
  right: 30px;
}
.leaflet-right .leaflet-toolbar-1 li:first-child > .leaflet-toolbar-icon {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.leaflet-right .leaflet-toolbar-1 li:last-child > .leaflet-toolbar-icon {
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}

（绘制工具栏和自定义工具栏位置滑动）： 结果图片

于 2019-06-27T19:52:37.953 回答