Question

我在使用jQuery mobile的页面上有一个Leaflet地图。如果我换掉Google地图而不是Leaflet，我会遇到类似的问题，所以我不相信这是Leaflet特有的，而是jQuery mobile。

问题是，当它首次加载时，地图的背景图像不会扩展以适合包含它的div的大小。

看到红色边框的大小正确，但灰色区域中缺少地图图像。请注意，只要在jsfiddle页面上调整结果窗口的高度或宽度（如果在localhost上运行，则调整完整的浏览器窗口），背景图像会立即填充画布。

我已经仔细阅读并试过类似线索的建议，但没有运气。如果我将地图放在没有JQM的页面上，我就不会遇到这个问题。

这是代码。提前谢谢。

<!DOCTYPE html>
<html>
  <head>
    <title>no title needed</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
      type="text/javascript">
    </script>

    <link rel="stylesheet"
      href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>

   <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>   

    <style>
      html, body {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

      /*this holds the map canvas*/
      .ui-content {
        position: absolute;
        top: 20px;
        left: 0px;
        right: 0px;
        bottom: 20px;
        width: 100%;
        padding: 0px;
        border: 1px solid red;
      }

      #map-canvas {
        height: 100%;
      }

    </style>

    <script type="text/javascript">
      $(document).on("pagecontainershow", function(event, ui) {
        var map = new L.Map('map-canvas', {
          center: [42.3, -71],
          zoom: 7
        });

        L.tileLayer('http://tiles1-4001b3692e229e3215c9b7a73e528198.skobblermaps.com/TileService/tiles/2.0/00021210101/0/{z}/{x}/{y}.png', {
          attribution: 'Skobbler'
        }).addTo(map);


      });

    </script>
  </head>
  <body>
    <div data-url="map-page" data-role="page" id="map-page" data-title="JQM's title">      
      <div role="main" class="ui-content">
        <div id="map-canvas"></div>
      </div><!-- /content -->
    </div>
  </body>
</html>

Answer 1

你的#map-canvas用div包裹。他们都必须允许将高度扩大到100％。

用这个来纠正你的JSFiddle ...

html, body, #map-page, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}

使用jquery mobile时，map在加载时不会扩展为完整大小

1 个答案: