Javascript 我将如何自定义传单弹出窗口的外观？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12606141/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How would I customise the look and feel of the leaflet popup?
提问by ArthurGuy
I am looking at customising a map built using leaflet and I would like to customise the Popup (L.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?
有没有人知道这样做的任何替代方法或现有方法？
Thanks
谢谢
回答by Robert Kajic
You should customize the look and feel using css. The following selectors are probably interesting:
您应该使用 css 自定义外观。以下选择器可能很有趣：
.leaflet-popup-content-wrapper {
}
.leaflet-popup-content-wrapper .leaflet-popup-content {
}
.leaflet-popup-tip-container {
}
Depending on your browser, you can use tools like Firebugfor 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.
根据您的浏览器，您可以使用Firebug 等工具或 Chrome/Safari 中的内置开发人员工具（右键单击页面上的任意位置并单击“检查元素”，或使用快捷方式）来检查弹出窗口并找到其他 css 选择器你可能想要修改。
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:
要扩展它的功能，您应该首先查看弹出源代码。查看其他 Leaflet 组件的来源，直到您对正在发生的事情有所了解。按照以下方式扩展 Popup 类，然后更改您想要的任何内容：
L.CustomPopup = L.Popup.extend({
// You changes here
});
回答by Adrian C.
Another way of customizing popup is by creating your custom css class for popup like:
自定义弹出窗口的另一种方法是为弹出窗口创建自定义 css 类，例如：
<style>
/* css to customize Leaflet default styles */
.popupCustom .leaflet-popup-tip,
.popupCustom .leaflet-popup-content-wrapper {
background: #e0e0e0;
color: #234c5e;
}
</style>
and then in you map divyou can set the marker custom popup with the bindPopupmethod and passing a customOptionsobject where you mention the css class name:
然后在您的地图中，div您可以使用该bindPopup方法设置标记自定义弹出窗口并传递一个customOptions对象，其中您提到了css class name：
// create popup contents
var customPopup = "<b>My office</b><br/><img src='http://netdna.webdesignerdepot.com/uploads/2014/05/workspace_06_previo.jpg' alt='maptime logo gif' width='150px'/>";
// specify popup options
var customOptions =
{
'maxWidth': '400',
'width': '200',
'className' : 'popupCustom'
}
var marker = L.marker([lat, lng], {icon: myIcon}).addTo(map);
// bind the custom popup
marker.bindPopup(customPopup,customOptions);
Hope it helps.
希望能帮助到你。
回答by MySchizoBuddy
There is an example over at mapbox which uses leaflet.js. The example shows how to use custom tooltip in leaflet.
mapbox 上有一个使用leaflet.js 的例子。该示例显示了如何在传单中使用自定义工具提示。
<style>
/*
* These CSS rules affect the tooltips within maps with the custom-popup
* class. See the full CSS for all customizable options:
* https://github.com/mapbox/mapbox.js/blob/001754177f3985c0e6b4a26e3c869b0c66162c99/theme/style.css#L321-L366
*/
.custom-popup .leaflet-popup-content-wrapper {
background:#2c3e50;
color:#fff;
font-size:16px;
line-height:24px;
}
.custom-popup .leaflet-popup-content-wrapper a {
color:rgba(255,255,255,0.5);
}
.custom-popup .leaflet-popup-tip-container {
width:30px;
height:15px;
}
.custom-popup .leaflet-popup-tip {
border-left:15px solid transparent;
border-right:15px solid transparent;
border-top:15px solid #2c3e50;
}
</style>
<div class='custom-popup' id='map'></div>
