Question

如果我在默认情况下隐藏的选项卡中渲染地图，然后导航到该选项卡（使其可见），则地图无法正确渲染。但是当我刷新页面时，地图会正确呈现。

问题 Image of map not rendering properly.

Google地图的Javascript

var map;
function initialize() {
    var latlng = new google.maps.LatLng(serLat, serLang); // - 34.397, 150.644);
    var myOptions = {
        zoom: 10,

        width: 1270,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    var marker = new google.maps.Marker
    (
        {
            position: new google.maps.LatLng(serLat, serLang),
            map: map,
            width: 1270,
            title: 'Click'
        }
    );
    //        var infowindow = new google.maps.InfoWindow({
    //            content: cntnt
    //        });
    //        google.maps.event.addListener(marker, 'click', function() {
    //            // Calling the open method of the infoWindow 
    //            infowindow.open(map, marker);
    //        });
}
window.onload = initialize;

Jquery标签的网址 http://quickerbook.imobisoft.eu/App_Themes/js/jquery.tabify.js

标签的HTML

<ul id="tabs-hd">
    <li class="active"><a href="#tab1">Tab One</a></li>
    <li><a href="#tab2">Tab Two</a></li>
    <li><a href="#tab3">Tab for Google Map</a></li>
</ul>

<div id="tab1">Content for tab one...</div>
<div id="tab2">Content for tab two...</div>
<div id="tab3"><div id="map"></div></div>

Answer 1

您需要做两件事：

当您显示隐藏的标签时，请确保正确调整地图所在容器DIV的大小。
要么在创建地图之前等待DIV可见并调整大小，否则在DIV可见并调整大小后，请向地图发送调整大小消息：

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

Answer 2

我所做的只是在div元素的样式中添加了一个高度，并且地图开始出现。

<div class="event-details" style="height:500px;" id="map_canvas">

</div>

Answer 3

嗨，我有同样的问题，你点击你的标签按钮然后你必须拨打initialize();看看我在做什么我在每个标签点击属性

上设置了这个功能

function ChangeTabs(e){
   $('#tabs-1').hide();
   $('#tabs-2').hide();
   $('#tabs-3').hide();
   $('#tabs-4').hide();

   var a = $.browser;
    if (a.msie)
    {
        $(e.srcElement.hash).show();
        if(e.srcElement.hash=='#tabs-3')
            initialize();
    }
    else
    {
       $(e.currentTarget.hash).show();
       if(e.currentTarget.hash=="#tabs-3")
            initialize();
    }

为什么我的地图不在jQuery选项卡中呈现？

3 个答案: