問題描述

我正在嘗試自定義縮放控制 (+/-)，因此它應該像 Google 地圖一樣出現在右側 (https:///www.google.com/maps/)

I am trying to customize zoom control (+/-), so it should appear in the right side like Google maps (https://www.google.com/maps/)

我嘗試添加 float:right; 但沒有成功.

I tried to add float:right; but it didn't work.

來自 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/

推薦答案

你的放大/縮小控件被絕對定位的元素包裹著 left:0 (由于 .leaflet-left 類)，所以 float:left 無濟于事，您可以通過 right:0 覆蓋 left:0 或更改 來將其右對齊>.leaflet-left 類到 .leaflet-right

Your zoom in/out controls are wrapped with absolutely positioned element with left:0 (due to .leaflet-left class), so float:left wouldn't help, you could align it to right by overriding left:0 by right:0, or changing .leaflet-left class to .leaflet-right

但更正確的方法是使用提供的 api.

But more correct way would be to use provided 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 參考可以在 這里

api reference for the library you use can be found here

這篇關于自定義leaflet.js中的放大/縮小按鈕的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！