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

【问题标题】：How would I customise the look and feel of the leaflet popup?我将如何自定义传单弹出窗口的外观和感觉？
【发布时间】：2016-11-18 07:08:16
【问题描述】：

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

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

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

谢谢

【问题讨论】：

标签： javascript leaflet

【解决方案1】：

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

.leaflet-popup-content-wrapper {
}

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

.leaflet-popup-tip-container {
}

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

要扩展它的功能，您应该从查看popup source code 开始。查看其他 Leaflet 组件的来源，直到您对正在发生的事情有所了解。通过以下方式扩展 Popup 类，然后更改您想要的任何内容：

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

【讨论】：

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

【解决方案2】：

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

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

然后在映射div 中，您可以使用bindPopup 方法设置标记自定义弹出窗口，并在您提到css class name 的地方传递一个customOptions 对象：

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

希望对你有帮助。

【讨论】：

【解决方案3】：

mapbox 上有一个使用leaflet.js 的示例。该示例展示了如何使用custom tooltip in leaflet。

<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>

【讨论】：