Question

我正在尝试使用一个始终位于底部的页脚制作一个完整的Google地图页面。

我使用标签样式页面作为其他内容的链接，地图位于最后一个标签上。如果我将代码放在所有选项卡上方，它就能完美运行。它只是在标签内部没有显示。

目前我将页脚保持在底部的方式是使用：

.pagewrap {
  height: 100%;
  margin-bottom: -58px;
}
.pagewrap:after {
  content: "";
  display: block;
}
.footer {
  height: 58px;
}

所以页脚一直停留在底部。

这是我用于页面的代码：

<!doctype html>
<html class="no-js" lang="en">
   <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Title</title>
      <link rel="stylesheet" href="css/foundation.css" />
      <style>
      #map-canvas {
        height: 100%;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        function initialize() {
          var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
          var mapOptions = {
            zoom: 4,
            center: myLatlng
          }
          var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

          var marker = new google.maps.Marker({
              position: myLatlng,
              map: map,
              title: 'Hello World!'
          });
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
      <script src="js/vendor/modernizr.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   </head>
   <body>
      <div class="pagewrap">
         <div class="row">
            <div class="large-12 columns">
               <div class="tabs-content">
                  <div class="content active" id="panel2-1">
                     <div class="panel" style="border:none;">
                      <h3>Page title 1</h3>
                     </div>
                  </div>
                  <div class="content" id="panel2-2">
                     <div class="panel" style="border:none;">
                      <h3>Page title 2</h3>
                     </div>
                     <dl class="accordion" data-accordion>
                        <dd>
                           <a href="#panel1">Demo accordian</a>
                           <div id="panel1" class="content">
                              Content for the first task lalalalala
                           </div>
                        </dd>
                        <dd>
                           <a href="#panel2">Demo accordian</a>
                           <div id="panel2" class="content">
                              Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                           </div>
                        </dd>
                        <dd>
                           <a href="#panel3">Demo accordian</a>
                           <div id="panel3" class="content">
                              Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                           </div>
                        </dd>
                        <dd>
                           <a href="#panel4">Demo accordian</a>
                           <div id="panel4" class="content">
                              Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                           </div>
                        </dd>
                        <dd>
                           <a href="#panel5">Demo accordian</a>
                           <div id="panel5" class="content">
                              Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                           </div>
                        </dd>
                     </dl>
                  </div>
                  <div class="content" id="panel2-3">
                     <div class="panel" style="border:none;">
                      <h3>Page title</h3>
                     </div>
                  </div>
                  <div class="content" id="panel2-4">
                     <div class="panel" style="border:none;">
                      <h3>PAge title</h3>
                     </div>
                        <div id="map-canvas"></div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="footer">
         <dl class="tabs" data-tab>
            <dd class="active"><a href="#panel2-1"><img src="img/home.png" class="footer-icon"></a></dd>
            <dd><a href="#panel2-2"><img src="img/file.png" class="footer-icon"></a></dd>
            <dd><a href="#panel2-3"><img src="img/camera.png" class="footer-icon"></a></dd>
            <dd><a href="#panel2-4"><img src="img/location.png" class="footer-icon"></a></dd>
         </dl>
      </div>
      <script src="js/vendor/jquery.js"></script>
      <script src="js/foundation.min.js"></script>
      <script>
         $(document).foundation();
      </script>
   </body>
</html>

有什么想法吗？

Answer 1

您需要将其添加到CSS：

.gmnoprint img { max-width: none; }

查看问题Zoom control and streetview not showing on my Google map?的答案

谷歌地图＆amp; Foundation Zurb - 地图显示不正确

1 个答案: