Google Maps API V3灰色區域

我安裝了Google Maps API V3，但我無法使調整大小功能正常工作。我已經將腳本顯示在單擊鏈接時下降的分區中，但是它顯示了側面的灰色區域。我已經閱讀了實例，您必須在顯示分區的腳本中具有調整大小的功能，但是我無法正確實施它。Google Maps API V3灰色區域

enter image description here

下面是導致師（類=「內容」）被泄露的代碼：我有id爲「地圖」一個div內的地圖

$(function() { 
$('.action').click(function() {   
    var name = $(this).attr("name"); 
    var content = $('.content[name=' + name + ']'); 
    $('.content').not(content).hide('fast'); 
    content.slideToggle('fast'); 
});

。

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

我一直在整夜工作在網站的其他部分，並在此刻相當尷尬。對不起，如果我忘了發佈必要的東西來解決這個問題。

在此先感謝，Bc。

來源

2012-06-26 itsbc

您需要手動在Google地圖上調整均衡大小。

google.maps.event.trigger(map, 'resize')

Reference。

更新

<script type="text/javascript"> 
// Global Variable 
var map; 

// This is a global Function 
function initialize() 
{ 
    // This variable is scoped only for the initialize function, 
    // it is not available to other functions scoped globally 
    var myOptions = 
    { 
    center: new google.maps.LatLng(-34.397, 150.644), 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    // Instead of a function scoped map variable this should be global 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    google.maps.event.trigger(map, 'resize') 
} 
</script>

然後你就可以換到下面的代碼：

$(function() 
{ 
    $('.action').click(function() 
    {   
    var name = $(this).attr("name"); 
    var content = $('.content[name=' + name + ']'); 
    $('.content').not(content).hide('fast'); 
    // this uses the callback functionality 
    // to only throw the trigger after the 
    // animation finishes. 
    content.slideToggle('fast', 
     function() 
     { 
     google.maps.event.trigger(map, 'resize'); 
     }); 
    }); 
});

來源

2012-06-26 19:37:41

感謝您的快速響應。我確信我做錯了什麼，但這是我目前的做法。 '<腳本類型= 「文本/ JavaScript的」> 功能初始化（）{ VAR myOptions = { 中心：新google.maps.LatLng（-34.397，150.644）變焦：8，的mapTypeId：谷歌。 maps.MapTypeId.ROADMAP }; var map = new google.maps.Map（document.getElementById（「map_canvas」）， myOptions）; \t \t \t; \t \t google.maps.event。觸發器（地圖，'調整大小'） } ' – itsbc

這裏有兩個可能的問題;首先你的地圖變量看起來不是全局的，所以沒有其他函數可以使用它，其次，在'slideToggle（）'完成後，你需要觸發調整大小。 –

我非常喜歡jquery，並且我並不十分清楚如何解決有關地圖變量的全局問題。我只是通過var map =「map」來聲明它嗎？再次感謝您的幫助。 – itsbc

嘿，我實現了一個快速簡單的解決這個：

function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(42.365885, -71.258658), 
     zoom: 16, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
    google.maps.event.trigger(map,'resize'); 
} 

$(document).on("pageshow", "#map", function() { 
    initialize(); 
});

將頁面div命名爲「map」，將地圖div命名爲「map-canvas」。

這似乎是當頁面顯示時初始化地圖。通過在用戶打開地圖時加載地圖，這會讓您的應用程序變得更慢，但它可以避免由dom和whatnot造成的錯誤。這完全解決了我的phonegap + jquery手機+谷歌地圖應用上的角度映射/灰色地帶問題！

來源

2013-07-25 01:10:27 user2183893

Google Maps API V3灰色區域

回答

相關問題