jquery-ui - 为什么我的 jQuery UI 选项卡中的 Google map 只在屏幕左上角显示一个图 block ？

Question

我在 jQuery 选项卡中有两个 Google Map API v3 map 。它们都在第一次出现在其选项卡中时显示，但最初取消选择的选项卡仅在左上角显示一个图 block 左右。

定期调用 google.maps.event.trigger(all_map, 'resize') 不会改变这一点。

在我的代码中，我有:

            <div id='all_map_canvas'>
            </div>
            <script>
                function show_all_map()
                    {
                    var center = new google.maps.LatLng(%(center_latitude)s - .15, %(center_longitude)s + .2);
                    var myoptions = {
                        zoom: %(zoom)s,
                        center: center,
                        mapTypeId: google.maps.MapTypeId.TERRAIN
                        };
                    all_map = new google.maps.Map(document.getElementById('all_map_canvas'), myoptions);
                    all_map.setZoom(%(zoom)s);
                    jQuery('#all_map_canvas').show();
                    google.maps.event.trigger(all_map, 'resize');
                    }
                function show_all_map_markers()
                    {
                    %(all_map_markers)s
                    }
                var markers = [];
                jQuery('#all_map_canvas').width(jQuery(window).width() -    300);
                jQuery('#all_map_canvas').height(jQuery(window).height() -  125);

标签交换后如何使两个 map 都显示完整？

Answer 1

我遇到了同样的问题: div 中的 Google map 样式为 display:none; .
用这两个步骤解决它:

删除除 height:100%; 之外的 div 的所有其他样式

在显示持有 div 后启动 map ，而不是在创建时启动 map 。就我而言，在 show 方法的回调函数中:

CSS

.main-window #map{
    height:100%;
}

JS

$('.main-window').show(3000, function() {
    // create the map after the div is displayed
    var mapOptions = {
        center: new google.maps.LatLng(42.499591, 27.474961),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
});

HTML

<div class="main-window">
    <div id="map"></div>
</div>

在 jQuery 的 '$(document).ready(...' 或 Google 的 'google.maps.event.addDomListener(window, "load", ...' 之类的事件中启动它由于某种原因无法正常工作。

希望能帮助到你。