Google地圖無法在頁面上完全渲染？

我在我的頁面上有一個搜索窗格的谷歌地圖我建立了自己，可以隨意顯示和隱藏。它涵蓋了像一邊可以說200個地圖的像素。事情是，當我調整我的地圖的大小時，窗格重疊的區域是不被渲染的，即地圖由於某種原因不會在那裏渲染。Google地圖無法在頁面上完全渲染？

看看這個link

在箱型可以說OMDB這是一個機場，然後按回車的ICAO代碼。

結果顯示，您會看到窗格。現在單擊全屏鏈接，然後單擊機場選項卡以使面板消失 - 現在看到地圖的一部分根本沒有渲染過......我必須拖動地圖並且只部分渲染該地區。我該如何解決它？

僅供參考我已經在Windows XP上的Google Chrome，Firefox和IE8上運行它。有沒有辦法像強制完成渲染地圖等？這是一個相當不穩定的問題，它可能與我的代碼有關，還是它是一個主機問題？或者Google不喜歡我？ :(

編輯：見上一面的大丑補丁它在映射應該已經呈現，以及未呈現的區域縮放沒量和平移有助於明確這:(

來源

2009-11-17 Ali

我不能重現問題你有，但它看起來類似於我已經看到谷歌地圖的另一個問題。

它看起來像你可能會違反谷歌地圖的方式確定哪些瓷磚在視圖中。它只會計算一次，第一次將地圖加載到div中時，如果div增長，則不會繪製足夠的地圖。幸運的是，這很容易處理。任何時候容器可能已經調整大小，在地圖實例上使用checkResize()方法，並且裁剪區域將從容器的當前大小重新計算。

來源

2009-11-22 07:14:03 SingleNegationElimination

在Internet Explorer中嘗試它 - 它有時在Firefox中做了很多，但有時它不 – Ali 2009-11-22 07:33:37

注意這適用於舊版Google Maps API版本，但不是v3。phidah的答案適用於v3版本，以及map.setCenter和map.setZoom以重新映射並重新縮放地圖。 – 2013-02-25 17:48:53

至少在api v3中不存在checkResize。使用google.maps.event.trigger（map ，'resize'）;取而代之的是 – 2015-05-14 12:21:23

爲。據我可以看到它正常工作在OS X 10.6.2中的谷歌瀏覽器。

http://i33.tinypic.com/sfe3ah.png

唯一的問題是，哥本哈根機場是無處您的應用程序意味着位置附近。渙散是的中間海洋;-)

編輯：
我看到了你的截圖，在我看來，Google地圖不會呈現搜索和搜索結果窗格所覆蓋的地圖部分，並且之後渲染不會被正確觸發隱藏搜索窗格。

我還沒有能夠在Google Maps API中找到像樣的渲染觸發器，但我認爲您應該嘗試像編程式地放大或縮小地圖或將地圖中心移動到其他地方或背面，以便可能會強制重新渲染地圖。

或者，您也可以嘗試手動觸發一些你認爲可能掀起地圖的重新描繪的事件，例如google.maps.event.trigger(map, 'resize')。

我知道這些建議感到使它工作的一個可怕的黑客攻擊方式，我非常不確定是否會工作，但它是我最好的拍攝;-)

來源

2009-11-17 04:45:37 phidah

那麼所有的位置都開發起來了：-S需要解決這個問題。它很不穩定，因爲在很多時候，當你想瀏覽它時，搜索面板出現在右側的一個巨大的無條狀補丁... – Ali 2009-11-17 04:54:47

@phidah - 你沒聽見？加利福尼亞州墜入大海，因此LAX的位置現在是正確的。 :-p – JasCav 2009-11-17 05:19:26

哦，是的，沒錯，但是2012年已經？ ;-) – phidah 2009-11-17 05:30:01

我有同樣的問題，並解決了它簡單地通過改變含div來的「PX」，而不是「％」（e的寬度。g width =「700px」而不是「80％」）。我猜Google可以用這種方式做更好的尺寸計算......我不保證這一點，但它幫助我

來源

2011-05-30 02:24:05 Okultis

是的，您必須提供容器DIV的真實像素高度和寬度。這實際上在Google API中有詳細介紹。

通過使用像這樣的：

<div id="map_canvas" style="width:500px;height:500px;"></div>

代替

<div id="map_canvas"></div>

你就可以回家免費的！

來源

2012-02-12 03:03:28

I ju被這個咬了！百分比大小不起作用，指定像素大小。 – Simon 2012-11-03 18:33:35

只要你在地圖上放置一個resize事件處理程序，任何東西都應該可以工作。我大量使用這個響應式網站，它非常完美無瑕。但是，在其他情況下，儘量避免調整地圖的大小，而不要調整窗口的大小，因爲它很重。 – Johnride 2014-12-15 20:46:12

我相信這應該是被接受的答案 – 2015-08-20 12:42:05

如果您使用的是jQuery插件goMap，那麼你應該使用：

google.maps.event.trigger($.goMap.map, 'resize');

儘管你應該在一個事件，以便運行顯示地圖時，這個包起來。這是我如何做到這一點在我的代碼：

$(document).on('click', '#mapClicker', 'initmap', function() { 
    setTimeout(function() { 
     google.maps.event.trigger($.goMap.map, 'resize'); 
     $.goMap.fitBounds(); 
    }, 100) 
});

來源

2013-01-02 14:32:14 DarkMukke

我有這個問題，我發現的唯一的解決方案（在我的實例）是觸發元素之後的調整大小的內聯。我不能說爲什麼，但我發現一個線程，有人也有這個解決方案。（抱歉，沒有參考）我的設置有點不同;它來自jQueryMobile注入頁面，所以後期實例化可能與我的問題有關。希望這有助於某人。

<div id="my-map"></div> 
<script type="text/javascript"> 
    $('#my-map').height($("#my-map-container").height()); 
    $('#my-map').width($("#my-map-container").width()); 
    google.maps.event.trigger($('#my-map'), 'resize'); 
</script>

來源

2013-01-27 22:00:40 lucygenik

-1

function initialize(lon,lat) { 
var largeLatlng = new google.maps.LatLng(lon,lat); 
var largeOptions = {zoom: 18, center: largeLatlng,mapTypeId:  google.maps.MapTypeId.ROADMAP}; 
var largeMap = new google.maps.Map(document.getElementById("map"), largeOptions); 
var largeMarker = new google.maps.Marker({position: largeLatlng, map:largeMap, title:"Cherrytrees"}); 

google.maps.event.addListenerOnce(largeMap, 'idle', function(){ 
    google.maps.event.trigger(largeMap, 'resize'); 
    largeMap.setCenter(largeLatlng); 
}); 
largeMarker.setMap(largeMap); 

}

來源

2013-09-25 08:26:16 user2814291

在谷歌地圖V3，你需要魔法的點點記錄在這裏： https://developers.google.com/maps/documentation/javascript/reference#Map 下事件

開發人員應在地圖上觸發該事件時，DIV改變 size：google.maps.event.trigger（map，'resize'）

訣竅是知道當來調用這將取決於您的代碼情境。如果你使用的是Bootstrap 3 Modals，這個效果非常好。

$("#modal-map") 
    .modal() 
    .on("shown.bs.modal", function() { 
     google.maps.event.trigger(gmap, 'resize'); 
    });

哪裏gmap是您創建的google.maps.Map對象。

來源

2015-01-30 12:59:16 dpjanes

已批准，這是v3中的方法。 – 2015-05-14 12:21:09

我知道這個問題有點老了，但我剛碰到類似的問題。但是，在我的情況下，我在iframe內設置了要從身體加載的地圖（對於全屏效果）。

就像周杰倫在他的回答一寬度和高度必須指定，我沒有那麼做提及。

我改變：

<body style="margin:0;">

到：

<body style="margin:0;width:100%;height:100%">

，現在它在Chrome，Firefox和Internet Explorer 10完全加載。

希望這可以幫助那些也遇到過這個問題的人。您需要必須指定寬度和高度它可以跨不同的客戶端。

問候

來源

2015-03-21 05:14:31

在我的情況下，對Mac設備同樣的問題：的Safari 5.1.7（Windows操作系統的10 [對不起]） Safari瀏覽器5.1（新iPad 1舊對不起]） Safari瀏覽器10（iPhone 6加）這裏我爲我解決工作： 1）捕獲瀏覽器的寬度detect.min.js 2）改變ATTR風格寬度參數 3）調整地圖

/* Of course insert detect.min.js and Jquery in your HTML ;)*/ 
 
var user = detect.parse(navigator.userAgent); 
 
var browserFamily=user.browser.family; 
 
var browserVersion=user.browser.version; 
 
if (browserFamille=="Mobile Safari" || browserVersion.substr(0,3)=="5.1") { 
 
    canvasWidth = $(window).width(), 
 
    $(".macarte").attr("style","width:"+canvasWidth+"px") 
 
    google.maps.event.trigger(map, 'resize'); 
 
} 
 
/* browserFamily returns "Mobile Safari" for tablet and mobile devices; "Safari" for desktop devices */

來源

2016-12-13 11:35:42 Mattabile

我面對同樣的問題，當我試圖在對話框中加載谷歌地圖。這就像谷歌地圖沒有正確渲染。所以我找出下面的解決方案，可能會解決您的問題。

我已經在初始化對話框後觸發了Google地圖調整大小事件，請檢查下面的剪切代碼。

google.maps.event.trigger(map, 'resize', function() { 
    // your callback content 
});

例子：

我已加載地圖通過Ajax調用初始化，然後對話，最後引發谷歌地圖調整事件。

$.ajax({ 
    url:"map.php", 
    type:"POST", 
    success:function(data){ 
     $("#inlineEditForm").html(data); 

     $('#inlineEditPopUp').dialog('open'); 
     google.maps.event.trigger(map, 'resize', function() { 
      // your callback content 
     }); 
    } 
});

來源

2017-08-03 12:32:02

Google地圖無法在頁面上完全渲染？

回答

相關問題