Question

这个问题已经多次解决，但所有解决方案都没有解决我的问题。它已经写了很多：用于显示内容的不同部分的标签，当在tab1中加载地图时，即在页面加载时打开的地图，它显示正常。

将地图加载到需要单击的其他选项卡中，要调用时，它不会按预期绘制地图。

我已经尝试添加google.maps.event.trigger（map，'resize'）;单击选项卡时，它不执行任何操作。

这是我的代码，我为此疯狂，花了10多个小时尝试所有建议！

这是处理被点击标签的部分：

$(document).ready(function() {

//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content

//On Click Event
$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content



    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content

    if (activeTab=='#tab4') { 

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



    $(activeTab).fadeIn(

    ); //Fade in the active content


    return false;
});

}）;

使用警报查看是否在tab4上调用代码时，它可以正常工作。

以下是googlemaps代码

    function initialize() {

  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(<? echo $lattie; ?>, <? echo $langie; ?>),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    title: 'Click to zoom'
  });

  google.maps.event.addListener(map, 'center_changed', function() {
    // 3 seconds after the center of the map has changed, pan back to the
    // marker.
    window.setTimeout(function() {
      map.panTo(marker.getPosition());
    }, 3000);
  });

  google.maps.event.addListener(marker, 'click', function() {
    map.setZoom(8);
    map.setCenter(marker.getPosition());
  });
}

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

我在body标签中调用intitalize（），将其更改为我调用resize的位置，也没有解决它。

最后用map-canvas显示div的位：

        <li id="four">
   <div id="map-canvas" style="width:575px; height:500px;float:left;border:1px solid #d74c15;"></div>
    </li>

正如我所说，我为此疯狂，我无法让它发挥作用，任何帮助都会非常感激！

Answer 1

在我的一个项目中，这有点棘手，我试图隐藏并通过链接显示地图时遇到了同样的事情。对我来说，调整大小事件处理程序是我所需要的但是请确保在它之后添加以下代码：

此处更新是使用的完整功能。

function showMap(){
  if(animating == false)
  {
    animating = true;

    if(mapVisible == false)
    {
      $("#map-wrapper").animate({
        height:352
      },500,function(){

        $("#create-event-map").fadeIn("fast");
        google.maps.event.trigger(eventsMap, 'resize');
        var center = new google.maps.LatLng(38,24);
        eventsMap.setCenter(center);
        $("#show-map-wrapper a").html("Hide map");
        mapVisible = true;
        animating = false;

      })
    }
    else
    {
      $("#create-event-map").fadeOut("fast",function(){
        $("#map-wrapper").animate({
          height:0
        },500);
        $("#show-map-wrapper a").html("Show map");
        mapVisible = false;
        animating = false;
      })
    }
  }
  return false;
}

这里的工作示例：http://goo.gl/2syX8

如果要查看它，请在create.event.init.js文件中

<强>更新

如果您想要刷新地图，则应更改此代码：

if (activeTab=='#tab4') { 

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



$(activeTab).fadeIn(

); //Fade in the active content

有了这个：

if(activeTab == 'YOUR TAB ID')
{
   $(activeTab).fadeIn(function(){
        google.maps.event.trigger(map, 'resize');
        var center = new google.maps.LatLng(<LAT>,<LNG>);
        map.setCenter(center);
        map.setZoom( map.getZoom() );
   })
}

存储最后使用的lat和lng，并在这段代码中替换它们。

Google Maps API v3，jQuery，Tabs，地图未显示在隐藏的div上

1 个答案: