0

我有一个 Rails 4 应用程序，我正在使用 Bootstrap。我想展示一张 Google Maps v3 地图。我成功地做到了，但现在我想在一个 div 容器中显示这个地图，该容器最初是隐藏的，位于 Bootstrap 行内，并且跨越 div。因此，当用户单击“显示地图”按钮时，会显示 div，其中包含地图。

当用户单击按钮时，我可以显示 div，但地图显示不正确。我只能在 div 的左上角看到一个 200px 左右的小正方形地图，而 div 的其余部分是灰色的。控件也显示错误。

我看到有很多条目存在这个问题，但是到目前为止我还无法修复它。

我不确定问题是因为引导程序（我看到一篇帖子说你必须覆盖一些 img 样式。我已经做到了）或者问题是否与调整地图大小有关。但事实是我无法正确显示它。

请帮忙。

我的代码：

导轨视图：

    <div class="row">               
         <div class="span12">

                <!--Map div -->     
                <div class="sliding-map">                           
                    <dl class="dl-horizontal">
                        <dt>Latitude:</dt>
                        <dd><%= option.latitude%></dd>
                         <dt>Longitude:</dt>
                        <dd><%= option.longitude%></dd>
                         <dt>Address:</dt>
                        <dd><%= option.address%></dd>
                    </dl>                                           

                    <div class="map_container">
                        <div id="map-canvas" style="height: 500px; width: 926px"></div>     
                    </div>                   
                </div>
            </div>
        </div>

Javascript： 

    // Shows and hide info, rating and maps divs.
    $(document).ready(function(){                       

        $(".show-on-hover").hide();                               
        $(".sliding-map").hide();                                           

        $('.show_map').click(function() {
            $(".sliding-map").slideToggle();
        });



        var map;
        function initialize() {
          var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        }

        google.maps.event.addDomListener(window, 'load', initialize);                                       
    });

和 CSS：

 html, body, #map-canvas {
 margin: 0;
  padding: 0;  
}

.map_container {
  padding: 6px;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc #ccc #999 #ccc;
  -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
  -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
  box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
}

.map_container img{max-width: none;}
4

1 回答 1

0

我已经修好了！

只需要添加

google.maps.event.trigger(map, 'resize');

到显示 div 的函数，如下所示：

$('.show_map').click(function() {
     $(".sliding-map").slideToggle();
     google.maps.event.trigger(map, 'resize'); 
});
于 2013-09-22T16:06:21.377 回答