Javascript 我如何定制传单弹出窗口的外观和感觉？

我正在寻找使用传单定制地图，我想定制弹出窗口（L.Popup）

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

是否有人知道任何替代方案或现有的方法

---

谢谢

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

.leaflet-popup-content-wrapper {
}

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

.leaflet-popup-tip-container {
}

根据浏览器的不同，您可以使用Firefox或Chrome/Safari中的内置开发者工具（右键单击页面上的任意位置，然后单击Inspect element或use）等工具来检查弹出窗口，并查找可能需要修改的其他css选择器

要扩展它的功能，您应该首先查看。看看其他传单成分的来源，直到你对发生的事情有了一些感觉。按以下方式扩展Popup类，然后根据需要进行更改：

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

---

在mapbox上有一个使用传单.js的例子。 该示例显示了如何使用

/*
*这些CSS规则会影响带有自定义弹出窗口的地图中的工具提示
*班级。有关所有可自定义选项，请参见完整CSS：
* https://github.com/mapbox/mapbox.js/blob/001754177f3985c0e6b4a26e3c869b0c66162c99/theme/style.css#L321-L366
*/
.自定义弹出窗口.传单弹出内容包装器{
背景#2c3e50；
颜色：#fff；
字体大小：16px；
线高：24px；
}
.自定义弹出窗口.传单弹出内容包装器a{
颜色：rgba（255255,0.5）；
}
.自定义弹出窗口.传单弹出提示容器{
宽度：30px；
高度：15px；
}
.自定义弹出窗口.传单弹出提示{
左边框：15px实心透明；
右边框：15px实心透明；
边框顶部：15px实心#2c3e50；
}

另一种自定义弹出窗口的方法是为弹出窗口创建自定义css类，如：

<style>
/* css to customize Leaflet default styles  */
.popupCustom .leaflet-popup-tip,
.popupCustom .leaflet-popup-content-wrapper {
    background: #e0e0e0;
    color: #234c5e;
}
</style>

---

希望能有所帮助。

我想要的是更多的官方/结构化方法，类似于在谷歌地图上扩展弹出窗口的方式。谢谢你想改变它的功能吗？我已经更新了我的答案。

<style>
/* css to customize Leaflet default styles  */
.popupCustom .leaflet-popup-tip,
.popupCustom .leaflet-popup-content-wrapper {
    background: #e0e0e0;
    color: #234c5e;
}
</style>

// 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);