javascript - 在 leaflet.js 中自定义放大/缩小按钮

Question

我正在尝试自定义缩放控件 (+/-)，因此它应该像 Google map 一样显示在右侧 (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 不会帮助，您可以通过用 right:0 覆盖 left: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

可以找到您使用的库的 api 引用 here