6

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

问题 地图图像未正确渲染。

谷歌地图的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 选项卡的 URL 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>
4

3 回答 3

9

您需要做两件事：

  1. 当您显示隐藏的选项卡时，请确保您正确调整地图所在的容器 DIV 的大小。

  2. 要么等到 DIV 可见并调整大小，然后再在其中创建地图，要么在 DIV 可见并调整大小后，向地图发送调整大小消息：

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

于 2013-04-13T08:51:12.730 回答
1

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

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

</div>
于 2017-01-06T16:47:56.567 回答
0

嗨，我有同样的问题，你要点击你的 Tab 按钮，然后你必须打电话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();
    }
于 2013-07-27T09:49:58.767 回答