传单地图和jquery mobile如何修复地图答案

【问题标题】：leaflet map and jquery mobile how fix the map传单地图和jquery mobile如何修复地图
【发布时间】：2015-09-24 20:20:33
【问题描述】：

我花了很多时间寻找和尝试解决方案的代码，关于如何使用传单和 jquery mobile 显示地图，但我找不到解决方案。我显示了一个列表视图，当我单击它时，地图会显示一个带有 lat,lon 的图标，但我明白了。

任何人都可以帮助我。

这是我的代码。我需要你一张响应地图。

    <style type="text/css">
#map { min-height: 320px; height: 100%; margin: -15px;}
body {
padding: 0;
margin: 0;
}
html, body, {
height: 100%;
}
    </style>
</head>
<body>

         <div data-role="page" id="glossary">
            <div data-role="header">
                 <h3>Example</h3>
            </div>
            <div data-role="content">
                <ul data-role='listview' data-inset='true' id='resultsList'>
                    <!-- keep empty for dynamically added items -->
                </ul>
            </div>

        </div>
        <!-- display -->
        <div data-role="page" id="display">
            <div data-role="header">
                 <h3>Name Goes Here</h3>
 <a data-role="button" data-rel="back" data-icon="back">Back</a>
            </div>
            <div data-role="content">
  <div id="definition"></div>
        <div id="weathermap"></div>
            </div>
        </div>

<script>
var json ={"rows":[{"id":"129","id_user":"1","id_dispositivo":"1","Latitude":"10.1497326","Longitude":"-67.9283981"},{"id":"135","id_user":"1","id_dispositivo":"2","Latitude":"8.6119127","Longitude":"-70.2084732"}]};
            var currentItem = 0;
            $('#glossary').on('pageinit', function() {

                $.each(json.rows, function(i, term) {
$('#resultsList').append('<li><a href="#display"' + term.id_dispositivo + '"><img src="../menu0/images/dispositivos/small/'+term.id_dispositivo+'.jpg" height=100px width=100px/></a></li>')
                });
                $('#resultsList').listview('refresh');

                $('#resultsList li').click(function() {
                    currentItem = $(this).index();
                });
            });

            $('#display').on('pagebeforeshow', function() {
                $(this).find('[data-role=header] .ui-title').text(json.rows[currentItem].id_dispositivo);
var lat = json.rows[currentItem].Latitude;
var lon = json.rows[currentItem].Longitude;   
initMap(lat,lon);

            });



function initMap(lat,lon){
 document.getElementById('weathermap').innerHTML = "<div id='map' style='min-height: 320px; height: 100%; margin: -15px;'></div>";
var map = L.map('map').setView([lat, lon], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);

L.marker([lat,lon]).addTo(map)
.bindPopup('A pretty CSS3 popup. <br> Easily customizable.')
.openPopup();
   }
</script>

我使用此代码是因为当我创建地图时，我得到一个消息地图容器已经初始化。它的代码显示地图。

document.getElementById('weathermap').innerHTML = "<div id='map' style='min-height: 320px; height: 100%; margin: -15px;'></div>";

【问题讨论】：

标签： android cordova jquery-mobile leaflet

【解决方案1】：

地图容器的样式看起来不错，所以问题可能来自于的高度/宽度

<div id="weathermap"></div>

或

<div data-role="page" id="display">

例如，如果div#weathermap 的高度为 200 像素，那么您在其中添加 height: 100%; 的地图 div 最终将仅为 200 像素。

所以你必须确定这两个 div 中的哪一个没有占用页面高度（这也可能是正文高度的问题）

【讨论】：