在leaflet.js中自定义放大/缩小按钮 [英] Customize Zoom in/out button in leaflet.js
问题描述
我尝试自订缩放控制(+/-),因此它应该会显示在右侧(如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;
}
推荐答案
您的放大/缩小控制项用 left:0
(由于.leaflet-left类)绝对定位的元素包装,因此 float:left
可以通过覆盖 left:0
由 right: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);
查看更新小提示
您使用的图书馆的参考资料可以在这里
api reference for the library you use can be found here
这篇关于在leaflet.js中自定义放大/缩小按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!