在flexbox计算高度后渲染传单地图
los*_*ion 5 css flexbox angularjs leaflet angularjs-animation
我试图在一个灵活的孩子中绘制一个占据剩余空间的地图.
我在主要内容的顶部有几个标题,其中一个横幅有时隐藏/删除,所以我使用flexbox,以便标题可以消失,而不会影响其他元素的位置.当我使用绝对位置时,IE不能正常工作.
我的问题是,在Flexbox计算了地图div的高度之前,传单似乎正在计算地图视口.
例:
这是一张传单的截图,认为地图的高度比它应该的要小.
如果我检查元素高度是否正确.此外,如果我将计时器放入并强制使用传单使地图大小无效,则地图将重新渲染到正确的高度.
HTML:
<body>
<div class="header">
Header
</div>
<div class="banner">
Banner
</div>
<main class="main">
<div class="nav">
<strong>Navigation</strong>
</div>
<div id="map" class="map-content"></div>
</main>
<script src="script.js"></script>
</body>
CSS:
html, body {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
.header {
height: 50px;
background-color: grey;
color: white;
}
.banner {
height: 50px;
background-color: lightgrey;
color: white;
}
.main {
display: flex;
flex: 1 1 auto;
flex-direction: row;
}
.map-content {
flex: 1 1 auto;
}
.nav {
background-color: #2A3D4A;
color: white;
width: 200px;
}
编辑:
我已经把这个问题复制了一下,万岁!但是我仍然不知道究竟发生了什么.只有在我的应用程序中包含ngAnimate时才会出现此问题.如果我使用ngAnimate无关紧要.
这是被打破的插件.在初始页面加载时,地图很好.单击about链接,然后返回到地图.请注意,返回时,只有大约一半的地图加载.我将高度记录到控制台.当您离开地图并返回时,它总是大约一半大小.
角度动画是做什么来使元素在瞬间变成一半大小？这是角度的错误吗？
看起来传单地图在创建时获得高度,然后.invalidateSize()如果高度发生变化则需要调用.在传单的文档中,它说明了Make sure the map container has a defined height, for example by setting it in CSS(参见http://leafletjs.com/examples/quick-start.html).由于你没有明确地设置高度,而是有css规则,position: absolute; top:0; bottom: 0; left: 0; right: 0;所以它有点狡猾.
我认为问题是,当你包含ngAnimate它对具有transition属性的元素有影响,并且不知何故传单无法及时看到正确的高度.我认为你需要使用一种解决方法,例如检测身高和呼叫的变化.invalidateSize()
尝试将此添加到您的指令:
link: function(scope, element) {
scope.$watch(function() { return element.parent().height(); }, function (val) {
console.log('height changed to: ' + val);
scope.map.invalidateSize();
});
},
scope: true,
使控制器设置为$scope.map = L.map('map',{crs: L.CRS.EPSG4326}).setView([0,0], 4);使得传单映射对象在作用域上,并删除您拥有的css规则.map-content
编辑plunkr：http://plnkr.co/edit/pIg9HKwkl0Bfhk4N3wQX ?p=preview
尝试像这样“无效”地图：
app.directive('leaflet', ['$document','$timeout', function($document,$timeout) {
function controller() {
console.log('in leaflet directive controller');
var element = $document.find('#map');
console.log('main container height: ' + element[0].offsetHeight);
var map = L.map('map',{crs: L.CRS.EPSG4326}).setView([0,0], 4);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
// the timeout wait the view to render
$timeout(function () {
// this rebuild the map
map.invalidateSize();
}, 0);
}
return {
template: '<div id="map" class="map-content"></div>',
controller: controller,
replace: true
}
}]);
| 归档时间： |
|
| 查看次数： |
1269 次 |
| 最近记录： |