javascript - 我如何自定义传单弹出窗口的外观和感觉？

Question

我正在考虑自定义使用传单构建的 map ，并且我想自定义弹出窗口 (L.popup)。

我能想到的唯一方法是使用我的新对话框构建自定义弹出层，并在每次用户与标记交互时重新定位它，这样当用户拖动 map 时弹出窗口保持对齐。

有人知道任何替代方案或现有的方法吗？

谢谢

Answer 1

您应该使用 css 自定义外观。以下选择器可能很有趣:

.leaflet-popup-content-wrapper {
}

.leaflet-popup-content-wrapper .leaflet-popup-content {
}

.leaflet-popup-tip-container {
}

根据您的浏览器，您可以使用 Firebug 等工具对于 Firefox 或 Chrome/Safari 中的内置开发人员工具(右键单击页面上的任意位置并单击“检查元素”，或使用 shortcuts )，检查弹出窗口并查找您可能想要修改的其他 css 选择器。

要扩展它的功能，您应该首先查看 popup source code 。查看其他 Leaflet 组件的来源，直到您对正在发生的事情有一些了解。按以下方式扩展 Popup 类，然后更改您想要的任何内容:

L.CustomPopup = L.Popup.extend({
  // You changes here
});