Question

将leafletjs与弹出窗口一起使用。当我有最小文本弹出窗口时，一切正常。如果我把它们做得更大，它们仍能正常工作。如果我添加太多，我添加

maxHeight

弹出窗口，弹出窗口可滚动。

如果我从足够的内容开始填充页面并使其可滚动，则它不可滚动。这是好的，直到我动态添加更多内容到弹出窗口然后我需要滚动条但它不会显示。

有关如何在弹出窗口已经渲染后让leafletjs将滚动条添加到弹出窗口的任何想法？

编辑：弹出选项初始化为循环中的标记，根据人们想要查看的内容加载不同的数据数组。初始化如下。

    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。当单击该按钮时，它将被加载器gif替换，而ajax函数会通过innerhtml获取它在弹出窗口中放置的一些数据。

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

我将maxheigth设置为350px，一旦添加额外数据，它就会增长到520px而没有滚动条。

编辑：删除了测试页。

Answer 1

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

设置maxHeight选项后，滚动条会在内容过大时立即显示，并在内容变小时立即消失。

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

修改

关于如何向弹出元素添加内容的额外细节和代码：

当Leaflet检测到内容过大时，会动态添加height CSS属性（如果需要，会显示滚动条）。

然而，如果您使用setContent弹出窗口方法，则此检测只会。如果您更改了内容通过外部函数（如weatherload函数中的AJAX回调，＆＃34;手动＆＃34;更改弹出内容innerHTML的一部分。）

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

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

A＆＃34;适当＆＃34;解决方案是避免通过innerHTML添加内容。相反，您应该使用setContent popup method更新您的内容（您将复制初始图片，并添加新内容）。这也可以避免使用ID与所有弹出窗口相同的div（这依赖于任何时候地图上只打开一个弹出窗口的事实，但如果此假设不再为真，则会中断）

Answer 2

如果你的弹出窗口比较聪明（正在做'努力工作'），我建议你动态编译一个新的指令。

            var newScope = $scope.$new();
            var myPopupContent = $compile('<div style="width:200px"  gr-my-popup ></div>')(newScope);

            L.popup()
                .setLatLng(e.latlng)                  
                .setContent(myPopupContent[0])
                .openOn(map);

grMyPopup将成为您的指示。

leafletjs添加可滚动弹出窗口？

2 个答案: