2

我在 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);

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

4

2 回答 2

4

我遇到了同样的问题： div 中具有 style 的谷歌地图display:none;。
用这两个步骤解决它：

  1. 删除我放置地图的 div 的所有其他样式，除了height:100%;

  2. 在显示持有 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(window, "load", ...' 之类的事件中启动它由于某种原因无法正常工作。

希望能帮助到你。

于 2013-04-10T22:07:01.107 回答
0

我正在使用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()));            
    }
});
于 2012-07-24T17:04:22.497 回答