0

この質問はすでに何度も解決されていますが、私の場合、すべての解決策で問題が解決するわけではありません。すでに多くの人が書いているように、コンテンツのさまざまな部分を表示するために使用されるタブ、つまりページロードで開くタブ1にマップをロードすると、正常に表示されます。

クリックして呼び出す必要がある他のタブのいずれかにマップをロードすると、想定どおりにマップが描画されません。

私はすでに 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

これは私のプロジェクトの 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() );
   })
}

最後に使用された緯度と経度を保存し、このコードで置き換えます。

于 2013-06-19T11:12:16.290 に答える