爲什麼我的Google地圖在jQuery UI選項卡中只顯示屏幕左上角的一個圖塊？

我在jQuery選項卡中有兩個Google Map API v3地圖。當它們第一次出現在其標籤中時，它們都會顯示，但最初取消選中的標籤只在左上角顯示一個或多個瓦片。爲什麼我的Google地圖在jQuery UI選項卡中只顯示屏幕左上角的一個圖塊？

定期調用google.maps.event.trigger（all_map，'resize'）不會更改此設置。

在我的代碼有：

  <div id='all_map_canvas'> 
      </div> 
      <script> 
       function show_all_map() 
        { 
        var center = new google.maps.LatLng(%(center_latitude)s - .15, %(center_longitude)s + .2); 
        var myoptions = { 
         zoom: %(zoom)s, 
         center: center, 
         mapTypeId: google.maps.MapTypeId.TERRAIN 
         }; 
        all_map = new google.maps.Map(document.getElementById('all_map_canvas'), myoptions); 
        all_map.setZoom(%(zoom)s); 
        jQuery('#all_map_canvas').show(); 
        google.maps.event.trigger(all_map, 'resize'); 
        } 
       function show_all_map_markers() 
        { 
        %(all_map_markers)s 
        } 
       var markers = []; 
       jQuery('#all_map_canvas').width(jQuery(window).width() - 300); 
       jQuery('#all_map_canvas').height(jQuery(window).height() - 125);

我怎樣才能使雙方的地圖選項卡互換後，充分展示？

來源

2012-07-24 JonathanHayward

你有沒有能夠解決這個問題？ – 2012-08-02 18:48:38

我調用google.maps.event.trigger（all_map，'resize'），因爲地圖最初並沒有顯示出來，我不知道它會幫助初始化顯示的東西：無。 – JonathanHayward 2012-08-03 19:57:27

+1我有這個確切的錯誤，'google.maps.event.trigger（map，'resize'）;'沒有做任何事情讓地圖顯示更多的瓷磚。 – 2012-08-08 13:30:42

我使用的是gmaps.js這是一個簡化的API谷歌地圖。但是，只需要在javascript中附加tabsshow事件並在代理的函數中刷新地圖即可。

下面的代碼我使用gmaps.js

$('#tabs').bind('tabsshow', function(event, ui) { 
    event.preventDefault(); 
    if (ui.panel.id == "tabs2") { 
      //gmaps.js method 
      map.refresh(); 
      map.setCenter(lastLoc.lat(), lastLoc.lng()); 

      //for native google.maps api 
      google.maps.event.trigger(map, 'resize'); 
      map.panTo(new google.maps.LatLng(lastLoc.lat(), lastLoc.lng()));    
    } 
});

來源

2012-07-24 17:04:22

您可能需要取消什麼'map.refresh（）'實際上，因爲它不是本地函數。 – 2012-07-24 18:24:21

我也想知道map.refresh（）是做什麼的。 – JonathanHayward 2012-07-24 19:41:25

@JonathanHayward文章編輯:) – 2012-07-25 11:49:54

我有同樣的問題：谷歌地圖中的div有風格display:none;。
與此兩個步驟解決它：

卸下我把地圖的div所有附加的造型除了height:100%;

啓動地圖創建它時，顯示在保持股利後不。在我的表演方法的回調函數的情況：

CSS

.main-window #map{ 
    height:100%; 
}

$('.main-window').show(3000, function() { 
    // create the map after the div is displayed 
    var mapOptions = { 
     center: new google.maps.LatLng(42.499591, 27.474961), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
});

HTML

<div class="main-window"> 
    <div id="map"></div> 
</div>

在jQuery的'$（document）.ready（...'）或Google的'google.maps.event.addDomListener（window，「load」，...'）等事件中不起作用。

希望它有幫助。

來源

2013-04-10 22:07:01 Plamen

爲什麼我的Google地圖在jQuery UI選項卡中只顯示屏幕左上角的一個圖塊？

回答

相關問題