Question

我在jQuery标签中有两个Google Map API v3地图。它们都会在第一次显示在选项卡中时显示，但最初取消选中的选项卡仅在左上角显示一个或左右的图块。

定期调用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);

如何在制表符交换后使两张地图全部显示？

Answer 1

我遇到了同样的问题：div中的Google地图样式为display:none; 通过以下两个步骤解决了这个问题：

删除div的所有其他样式我正在放置除height:100%;

显示保持div后，在创建保持div时启动地图。在我的情况下，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（窗口，“加载”，......'）之类的事件中启动它因某些原因无效。< / p>

希望它有所帮助。

Answer 2

我正在使用gmaps.js这是谷歌地图的简化API。但这只是在javascript中附加tabsshow事件并在委托函数中刷新地图的问题。

这是我用于gmaps.js的代码

$('#tabs').bind('tabsshow', function(event, ui) {
    event.preventDefault();
    if (ui.panel.id == "tabs2") {
            //gmaps.js method
            map.refresh();
            map.setCenter(lastLoc.lat(), lastLoc.lng()); 

            //for native google.maps api
            google.maps.event.trigger(map, 'resize');
            map.panTo(new google.maps.LatLng(lastLoc.lat(), lastLoc.lng()));            
    }
});

为什么我的Google地图在jQuery UI标签中只显示屏幕左上角的一个图块？

2 个答案: