我有一个带有GeoJSON点图层的简单传单地图。
我想要一个信息框,而不是常规的弹出窗口,因此,在HTML中,我创建了以下内容:
<div id="panoutitlu" class="info-container" style="z-index: 601">
<div class="info-title">
<h1>SelectaÈi ceva</h1>
</div>
<div class="info-body" id="corp">
<div class="info-content-container">
<div class="info-content" id="panoutext"></div>
</div>
</div>
</div>
单击图层中的一个点时,命名为
info-title
使用GeoJSON中的属性填充,如下所示:
function onEachFeature(feature, layer) {
layer.on({
click: function populate() {
document.getElementById('panoutitlu').innerHTML = feature.properties.adresa;
});
我无法工作的是如何在
信息标题
单击,类似于
this map
.我想重现准确的行为,包括平滑过渡。这就是为什么我从中提取了CSS,并更改了一些大小和字体:
.info-title {
height: 80px;
font-family: 'Fira Sans Condensed';
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
user-select: none;
color: #FFF;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.info-content {
padding: 0 8% 24px 8%;
margin: 0 auto;
background: #385c54;
overflow-y: scroll;
font-family: 'Fira Sans Condensed';
font-size: 1rem;
line-height: 1.25em;
font-weight: 300;
}
.info-container {
position: absolute;
overflow-y: hidden;
bottom: 0;
right: 250px;
z-index: 1000;
background: #385c54;
cursor: pointer;
width: 300px;
height: 60vh;
color: #FFF;
font-family: 'Fira Sans Condensed';
font-size: 18px;
transition: all 0.4s ease-in-out;
transform: translateY(calc(100% - 80px));
}
.info-container.info-active {
transform: translateY(0);
}
.info-body {
margin-top: 80px;
overflow-y: scroll;
overflow-x: hidden;
position: relative;
height: 80%;
}
在JavaScript中,我尝试添加一个事件侦听器:
document.getElementById('panoutitlu').addEventListener("click", toggle('info-active') );
但它没有起作用。
希望有人能帮忙。
