Leaflet Map 元素位于 DOM 中但不渲染？答案

【问题标题】：Leaflet Map elements sit in DOM but don't render?Leaflet Map 元素位于 DOM 中但不渲染？
【发布时间】：2012-04-26 04:09:50
【问题描述】：

Leaflet 正在呈现，因为我可以在 DOM 中看到它的所有元素，但没有其他任何东西出现。我看到的都是灰色的。

我可以让地图图块出现的唯一方法是删除地图容器上的 position:absolute，但这会创建一堆混乱的地图图块。我检查了 GIT 历史，看看我是否不小心更改了样式，但没有运气。

这是初始化地图的代码：

// init everything on page show
$("#map").live('pageshow',function() {
    if(window.localStorage.getItem("lat")!=undefined) { var lat = window.localStorage.getItem("lat")} else { var lat = '49.264'; }
    if(window.localStorage.getItem("lng")!=undefined) { var lng = window.localStorage.getItem("lng")} else { var lng = '-123.123'; }
    try {         
        var map = window.map
        map = new L.Map('map-container');
        var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/006282296d334e66a593e55aca6b5ce0/54803/256/{z}/{x}/{y}.png';
        var cloudmadeAttribution = 'Map Data &copy; 2011 OpenStreetMap';
        var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
        map.setView(new L.LatLng(lat, lng), 12).addLayer(cloudmade);
        map.invalidateSize();
    } catch(e) {console.log(e)}
    userMarkers[1] = new L.Marker( new L.LatLng( lat,lng ) , {icon: new iconUser, clickable: true} );
    map.addLayer( userMarkers[1] );
});

环境包括 jQuery mobile。不幸的是，控制台没有记录任何错误，当我检查时，上面的 localStorage 确实保存了有效的 LatLng 值。

截图：

有什么猜测吗？

【问题讨论】：

标签： leaflet

【解决方案1】：

我不确定问题是如何开始的，但为了解决它，我删除了所有地图容器样式，然后声明：

#map-container {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin: 0;
    padding: 0;
}

现在问题解决了。我以前从未使用过这种样式，所以我无法推测问题是如何开始的。

【讨论】：