自定义 Leaflet.js 中的放大/缩小按钮答案

【问题标题】：Customize Zoom in/out button in leaflet.js自定义 Leaflet.js 中的放大/缩小按钮
【发布时间】：2022-02-11 21:36:22
【问题描述】：

我正在尝试自定义缩放控制 (+/-)，因此它应该像 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/

【问题讨论】：

因为我看到很多关于在Leaflet中自定义控件位置的问题，这里有一个简单的CSS方法：使用.leaflet-top { padding-top: 50px; }。这将向下偏移缩放控件和图层控件。您可以使用他们的位置来单独定位他们。

标签： javascript css leaflet

【解决方案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参考

【讨论】：

但数量有限！我想控制位置（位置：'topright'）但 padding-top 30 px ？我该怎么做？
正如我所说，您的控件被包裹在绝对定位的元素中，例如如果是“topright”，它将具有 .leafleft-right 类，因此您可以在 css 中添加类似 top:30px 的内容

【解决方案2】：

目前你可以使用：

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

【讨论】：

几周后我转而使用相同的。谢谢指出
实际上这会删除控件并使用正确的位置重新创建它。接受的答案更好。但是这个答案帮助我理解了 API。
知道为什么不能将这些链接在一起吗？

【解决方案3】：

如果您在 Angular 中使用传单，请不要忘记 ::ngdeep 没有此样式不适用

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。