Question

您好我试图创建一个jquery移动页面，其中包含具有特定坐标和几个可折叠项目的地图。我从这个站点（http://jsfiddle.net/Gajotres/7kGdE/）获得了地图的代码，但每当我尝试它时，屏幕就会变成空白。我也不希望地图占据整个页面。我希望它与可折叠项目一起显示在页面上。任何帮助将不胜感激。感谢

<html>
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
     <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
     <script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
  </head>

  <style>
    #content {
       padding: 0;
       position : absolute !important; 
       top : 40px !important;  
       right : 0; 
       bottom : 40px !important;  
       left : 0 !important;     
    }
  </style>

  <body>
     <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
           <h3>First Page</h3>
        </div>

        <div data-role="content" id="content">

        <div id="map_canvas" style="height:100%"></div>
           <div data-role="collapsibleset">
              <div data-role="collapsible">
                  <h3>Click me - I'm collapsible!</h3>
                  <p>I'm the expanded content.</p>
              </div>

              <div data-role="collapsible">
                 <h3>Click me - I'm collapsible!</h3>
                 <p>I'm the expanded content.</p>
              </div>

              <div data-role="collapsible">
                 <h3>Click me - I'm collapsible!</h3>
                 <p>I'm the expanded content.</p>
              </div>

              <div data-role="collapsible">
                <h3>Click me - I'm collapsible!</h3>
                <p>I'm the expanded content.</p>
              </div>
          </div>
     </div>

     <div data-theme="a" data-role="footer" data-position="fixed">
        <h3>First Page</h3>
    </div>
   </div>
</body>
<script>
    $(document).on('pageinit', '#index',function(e,data){    
      var minZoomLevel = 10;
      var map = new google.maps.Map(document.getElementById('map_canvas'), {
      zoom: minZoomLevel,
      center: new google.maps.LatLng(38.50, -90.50),
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });
   });
 </script>
 </html>

Answer 1

您提供的代码应该没有问题，但是，您必须更改height的{{1}}并设置静态值。 map_canvas不会占据整个高度，因为父div 100%高度也未定义。内容div根据其中的内容进行扩展。

content

另请注意，您应该使用#map_canvas { height: 200px; width: 100%; }而不是已弃用的事件pagecreate。

<强> Demo

无法在jquery mobile中显示Google地图

1 个答案: