0

注意：我认为最好就此提出一个新问题。

所以我最近问了一个关于为什么谷歌地图不能正确渲染的问题。现在答案看起来简单明了，接受我的代码如下所示：

  var map;
  function initialize() {
    var mapOptions = {
         zoom: 8,
         center: new google.maps.LatLng(-34.397, 150.644),
         mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    google.maps.event.trigger(map, "resize");
  }

   google.maps.event.addDomListener(window, 'load', initialize);

问题是地图仍然损坏：

在此处输入图像描述

此地图存储在<div id="Map"></div>高度为 350 的 a 中。保存地图的这个 Div 是 Jquery-UI 选项卡的一部分，因此它还附加了 jquery 皮肤，这可能会影响大小等内容。

话虽如此，地图应该可以正常工作。

如果我打开控制台并输入：google.maps.event.trigger(map, "resize");地图就会按预期工作。

4

1 回答 1

1

我还在 jQuery UI 选项卡中嵌入了一个谷歌地图（v3），并且必须通过这个修复来解决这个问题：

var initialized = false;

$('.tabs').find('.ui-tabs-nav li').each(function() {
    if($(this).find('a').text() === 'Location') {
        if($(this).hasClass('ui-state-active')) {
            initialize();
            initialized = true;
        } else {
            $(this).click(function() {
                if(!initialized) {
                    initialize();
                    initialized = true;
                }
            });
        }
    }
});

请注意，initialize()应该运行您的起始地图代码。有很多方法可以对初始化进行切片和切片，但关键是我们要等到我们正在寻找的选项卡（在本例中为“位置”）处于活动状态时才这样做。

于 2013-09-04T17:08:30.027 回答