自定义 Leaflet.js 中的缩放按钮

Question

我正在尝试自定义缩放控件（+/-），使其像谷歌地图（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/

- user3378649

---

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

Answer 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

你使用的库的API参考可以在这里找到

- paulitto

---

但是它有限制！我想控制位置（position：'topright'），但是padding-top 30像素怎么办？我该怎么做？ - user3378649

就像我之前所说的，您的控件被包裹在绝对定位的元素中，例如在“topright”的情况下，它将具有.leafleft-right类，因此您可以在CSS中添加类似于top:30px的内容。 - paulitto

Answer 2

目前你可以使用：

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

- Sebastian Nowak

---

我后来开始使用相同的方法，几周后。感谢指出。 - user3378649

实际上，这将删除控件并以正确的位置重新创建它。被接受的答案更好。但是这个答案帮助我理解了API。 - dimitris93

你有什么想法，为什么不能将它们链接在一起？ - Trevor

Answer 3

如果您在Angular中使用Leaflet，请不要忘记使用::ngdeep，否则样式将无法应用。

- Kot14

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community