Question

我的页面顶部有一个面板菜单，用一个按钮打开。我想在它下面放一张地图，但地图不会出现。

 <!--for the slide bar-->
                    <!-- Main content -->
    <section class="content" style="height:360px; margin-left:30px" >
         <div class="row" style="width:100%; margin-left:auto; margin-right:auto">
            <div class="col-lg-12 col-xs-12" style=" direction:rtl;">
               <!-- Panel -->
                 <div id="toppanel" style="width:inherit">
                    <div id="panel">
                       <div class="content clearfix">
                           <div class="left" style="width:50%">
                              <div>
                                  <h2 style="text-align: center">הוספת נקודה</h2>                                                                    </div>
                  </div>
                       </div> <!-- /login -->
                    <!-- The tab on top -->
                        <div class="tab">
                            <ul class="login">
                                <li class="left">&nbsp;</li>
                                 <li id="toggle">
                                   <a id="open" class="open" href="#"></a>
                                   <a id="close" style="display: none;"                             class="close" href="#" />
                                  </li>
                                  <li class="right">&nbsp;</li>
                             </ul>
                        </div> <!-- / top -->
                  </div> <!--panel -->
                 </div>
          </div>
       </section><!-- right col -->
       <section> <!--for the map-->
         <div class="row" style="width:100%; height:1000px;">
          <div id="map_canvas" style="margin-left: 30px; width: 100%; height: 100%; padding: 0"></div>
         </div><!-- /.row -->
       </section>

这是地图的CSS：

html, body, #map_canvas {
                height: 100%;
                margin: 0px;
                padding: 0px;
            }

Answer 1

所提供的代码中存在一些可能的问题。要使用Google Maps API添加地图，您可能需要尝试以下操作：

在CSS中指定#map_canvas的高度，如下所示：

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}
#map_canvas {
    height: 500px;
}

请确保包含必要的JavaScript代码以初始化您的Google地图（来自https://developers.google.com/maps/documentation/javascript/tutorial），因为您在初始问题中未包含任何JS。特别是，您可以包含一个类似于以下内容的脚本：

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=API_KEY">
</script>
<script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: { lat: -34.397, lng: 150.644},
      zoom: 8
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

请务必更换＆＃34; API_KEY＆＃34;使用您自己的Google Maps API密钥，并相应地更新lat和lng的值。

地图未显示面板菜单

1 个答案: