0

这个问题已经被多次解决，但所有的解决方案都不能解决我的问题。许多人已经写过：用于显示不同部分内容的选项卡，当在 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 上被调用时，它可以工作。

这是谷歌地图代码

    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() ，将其更改为我调用调整大小的地方，也没有解决它。

最后显示带有 map-canvas 的 div 的位：

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

正如我所说，我为此发疯了，我无法让它工作，任何帮助将不胜感激！

4

1 回答 1

0

前段时间在我的一个项目中这有点棘手之后的代码：

这里的 UPDATE 是使用的完整函数。

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 并在这段代码中替换它们。

于 2013-06-19T11:12:16.290 回答