我正在考虑自定义使用传单构建的地图,并且我想自定义弹出窗口(L.popup)。
我能想到的唯一方法是在我的新对话框中构建一个自定义弹出层,并在每次用户与标记交互时重新定位它,这样当用户拖动地图时弹出框保持对齐。
有人知道这样做的任何替代方案或现有方法吗?
谢谢
我正在考虑自定义使用传单构建的地图,并且我想自定义弹出窗口(L.popup)。
我能想到的唯一方法是在我的新对话框中构建一个自定义弹出层,并在每次用户与标记交互时重新定位它,这样当用户拖动地图时弹出框保持对齐。
有人知道这样做的任何替代方案或现有方法吗?
谢谢
您应该使用 css 自定义外观。以下选择器可能很有趣:
.leaflet-popup-content-wrapper {
}
.leaflet-popup-content-wrapper .leaflet-popup-content {
}
.leaflet-popup-tip-container {
}
根据您的浏览器,您可以使用Firebug for Firefox 等工具或 Chrome/Safari 中的内置开发人员工具(右键单击页面上的任意位置并单击 Inspect element,或使用快捷方式)来检查弹出窗口并找到其他 css 选择器您可能需要修改。
要扩展它的功能,您应该从查看弹出源代码开始。查看其他 Leaflet 组件的来源,直到您对正在发生的事情有所了解。通过以下方式扩展 Popup 类,然后更改您想要的任何内容:
L.CustomPopup = L.Popup.extend({
// You changes here
});
自定义弹出窗口的另一种方法是为弹出窗口创建自定义 css 类,例如:
<style>
/* css to customize Leaflet default styles */
.popupCustom .leaflet-popup-tip,
.popupCustom .leaflet-popup-content-wrapper {
background: #e0e0e0;
color: #234c5e;
}
</style>
然后在您的地图中,div
您可以使用该方法设置标记自定义弹出窗口,并在您提到的地方bindPopup
传递一个customOptionscss 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);
希望能帮助到你。
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>