leafletjs添加滚动弹出窗口? [英] leafletjs adding scrollable pop up?

问题描述

将leaflet.js与弹出窗口配合使用.当我的弹出式窗口包含最少的文本时，一切正常.如果我加大它们，它们仍然可以正常工作.如果我添加太多，我会添加

Using leafletjs with popups. When I have popups with minimal text all works fine. If I make them bigger they still work fine. If I add too much I add

maxHeight

弹出窗口，它使弹出窗口可滚动.

to the pop up and it makes the pop up scrollable.

如果我开始时没有足够的内容来填充页面并使页面可滚动，那么它就不会滚动.可以，直到我向弹出窗口中动态添加更多内容，然后我需要滚动条，但它不会显示.

If I start with out enough content to fill the page and make it scrollable, it is not made scrollable. That is Ok till I dynamically add more content to the popup and then I need the scroll bar but it will not show up.

是否有关于如何在弹出窗口已经呈现后如何获取leafletjs将滚动条添加到弹出窗口的想法?

Any thoughts on how to get leafletjs to add the scroll bar to a popup once the popup has already been rendered?

弹出选项在循环中使用标记进行初始化，该循环根据人想要看到的内容加载不同的数据数组.初始化如下.

The popup options are initialized with the markers in a loop that loads different arrays of data depending on what a person wants to see. The initialization is as follows.

    var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title });
        marker.bindPopup('<img width="'+width+'" height="'+height+'"  src="'+a[3]+'"/><br><div id="weather"> <button type="button" onclick="weatherload(\''+a[0]+'\',\''+a[1]+'\')">Click Me for Weather!</button></div>',{'maxWidth':'500','maxHeight':'350','minWidth':'350'});
        CAMlayer.addLayer(marker);

弹出窗口中的图像占据了大部分空间.底部有一个带按钮的div.单击该按钮时，它会被loader gif替换，而ajax函数会通过innerhtml获取一些放入弹出窗口中的数据.

The popup has an image that takes up most of the space. At the bottom there is a div with a button. When the button is clicked it is replaced with a loader gif while an ajax function gets some data that it puts in the popup by way of innerhtml.

 document.getElementById("weather").innerHTML = xhttp.responseText;

我将maxheigth设置为350px，一旦添加了额外的数据，它将增长到520px，没有滚动条.

I set the maxheigth to 350px, once the extra data is added it grows to 520px with no scroll bar.

已删除测试页.

推荐答案

如何初始化弹出选项以及如何向其中添加更多内容?

How do you initialize your popup options and how to you add more content to it?

设置了maxHeight选项后，滚动条应在内容太大时立即出现，并在内容变得足够小时立即消失.

Once the maxHeight option is set, the scroll bar should appear as soon as the content is too big, and disappear as soon as it gets small enough.

演示: http://jsfiddle.net/ve2huzxw/92/

遵循有关如何向弹出元素添加内容的其他详细信息和代码:

Following the extra details and code about how you add content to the popup element:

Leaflet在检测到内容过大时会动态添加height CSS属性(必要时可显示滚动条).

The height CSS attribute (which makes the scroll bar appear if necessary) is dynamically added by Leaflet when it detects that the content is too big.

但是，如果您使用setContent弹出方法，则此检测仅在 发生.如果通过以下方法更改内容，则不会触发外部函数(例如weatherload函数中的AJAX回调手动"更改弹出内容innerHTML的一部分).

However, this detection occurs only if you use the setContent popup method. It is not triggered if you change the content through external function (like your AJAX callback in weatherload function that "manually" changes a part of the popup content innerHTML).

最简单的解决方法是在添加内容之后，在弹出窗口上调用myPopup._updateLayout()内部Leaflet方法.这将手动"强制Leaflet检查弹出内容的高度，并在必要时添加height CSS属性.

The easiest workaround is simply to call myPopup._updateLayout() internal Leaflet method on your popup, just after you have added content. This will "manually" force Leaflet to check the popup content height, and add the height CSS attribute if necessary.

更新的演示: http://jsfiddle.net/ve2huzxw/93/

一种适当的"解决方案是避免通过innerHTML添加内容.相反，您应该使用 setContent弹出方法来更新您的内容(您可以复制自己的内容初始图片，然后添加新内容).这也可以避免对所有弹出式窗口使用ID相同的div(这取决于以下事实:在任意一次地图上只能打开一个弹出式窗口，但是如果这种假设不再成立，则该弹出式窗口将中断)

A "proper" solution would be to avoid adding content through innerHTML. Instead, you should use setContent popup method to update your content (you would copy your initial image, and add your new content). This would also avoid using a div with an ID that is the same for all your popups (which relies on the fact that only 1 popup would be open on the map at any one time, but would break if this assumption is no longer true).

这篇关于leafletjs添加滚动弹出窗口?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！