我将如何自定义传单弹出窗口的外观和感觉?

How would I customise the look and feel of the leaflet popup?(我将如何自定义传单弹出窗口的外观和感觉?)

问题描述

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

I am looking at customising a map built using leaflet and I would like to customise the Popup (L.popup).

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

The only method I can think of is to build a custom popup layer with my new dialog in and reposition this every time the user interacts with a marker, this way the popup stays aligned when the user drags the map.

有人知道这样做的任何替代方案或现有方法吗?

Is anyone aware of any alternatives or existing ways of doing this?

谢谢

推荐答案

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

You should customize the look and feel using css. The following selectors are probably interesting:

.leaflet-popup-content-wrapper {
}

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

.leaflet-popup-tip-container {
}

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

Depending on your browser, you can use tools like Firebug for Firefox or the build in developer tools in Chrome/Safari (right click anywhere on the page and click Inspect element, or use shortcuts), to inspect the popup and find additional css selectors that you may want to modify.

要扩展它的功能，您应该首先查看 弹出窗口源代码.查看其他 Leaflet 组件的来源，直到您对正在发生的事情有所了解.通过以下方式扩展 Popup 类，然后更改任何您想要的内容:

To extend it's functionality you should start by looking at the popup source code. Look at the sources of other Leaflet components until you get some feeling for what's going on. Extend the Popup class in the following way, and then change whatever you want:

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

这篇关于我将如何自定义传单弹出窗口的外观和感觉?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！