Question

我正在尝试自定义缩放控件（+/-），因此它应该像Google地图一样显示在右侧（https://www.google.com/maps/）

我尝试添加float:right;，但它不起作用。

从CSS文件：

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  font: bold 18px 'Lucida Console', Monaco, monospace;
  text-indent: 1px;
  }
.leaflet-control-zoom-out {
  font-size: 20px;
  }

.leaflet-touch .leaflet-control-zoom-in {
  font-size: 22px;
  }
.leaflet-touch .leaflet-control-zoom-out {
  font-size: 24px;
  }

http://jsfiddle.net/hsy7v/1/

Answer 1

您的放大/缩小控件包含绝对定位的元素left:0（由于.leaflet-left类），因此float:left无效，您可以通过覆盖将其对齐left:0 right:0或.leaflet-left类更改为.leaflet-right

但更正确的方法是使用提供的api。

//disable zoomControl when initializing map (which is topleft by default)
var map = L.map("map", {
    zoomControl: false
    //... other options
});

//add zoom control with your options
L.control.zoom({
     position:'topright'
}).addTo(map);

请参阅更新的fiddle

您可以在here

找到您使用的库的api参考

Answer 2

目前您可以使用：

var map = L.map('map', {
  zoomControl: true
});
map.zoomControl.setPosition('topright');

自定义leaflet.js中的放大/缩小按钮

2 个答案: