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

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左级),所以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);

看到更新的小提琴

您可以在此处找到您使用的库的api参考

Answer 2

目前你可以使用:

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