Google Maps API - > Jquery Expandable地圖和瀏覽器問題

我一直在開發一個Google Map API v3頁面，並且有一個快速問題。基本上我用jQuery來隱藏/顯示地圖面板（MAP_HOLDER），問題是這樣的：Google Maps API - > Jquery Expandable地圖和瀏覽器問題

- >在Firefox中，地圖畫布沒有被API正確填充，只填充了大約1/5的tile （看起來像預期地圖的最後1/5）。反正來解決這個我jQuery中添加該代碼爲「擴大」功能：

google.maps.event.trigger(map, "resize");

- >現在我的主要問題，如果我什麼也不做，地圖是正確的IE但它錯誤地顯示在顯示Firefox和Chrome。有沒有其他人經歷過這種情況，我可以通過改變座標來「修復」它，但是這顯然顛倒了這個問題，並使I.E不正確。

我已經嘗試添加超時到「了slideDown（）」，但是這並沒有什麼忙......

謝謝，亞歷克斯

編輯，更多信息>我正在開發這一個RAD平臺，因此我很難讓代碼可用。但是，地圖基於兩個div，外部div和地圖畫布。我用jquery擴展/摺疊外部div。 jQuery代碼很簡單：

$(document).ready(function() { 
    $("#MAP_HOLDER").hide(); 
    $("#hideMap").hide(); 
}); 

collapse = function (element) { 
    $("#MAP_HOLDER").slideUp(); 
    $("#hideMap").hide(); 
    $("#showMap").show(); 
} 

expand = function (element) { 
    $("#hideMap").show(); 
    $("#showMap").hide(); 
    $("#MAP_HOLDER").slideDown(); 
    google.maps.event.trigger(map, "resize"); // resize map 
    var position = map.getcentre(); 
    map.setCentre(position); 
}

地圖API代碼：

// Set look and feel of the maps 
google.maps.visualRefresh = true; 
google.maps.event.addDomListener(window, 'load', init); 

// Create some variables for our map elements 
var map; 
var markersArray = []; 
var marker; 
var mapOptions = { 
    center: new google.maps.LatLng(lat_goes_here, lng_goes_here), 
    zoom: 11, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

// A function to run at page load 
function init() { 
    //location on form here: 
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
    //set marker image here 
    marker = new google.maps.Marker({ 
     icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png' 
    }); 
    marker.setMap(map); 
    marker.setTitle("stuff"); 
    // Add a function to run on the "click" event 
    google.maps.event.addListener(map, 'click', function (event) { 
     document.getElementById("pos_lat").value = event.latLng.lat(); 
     document.getElementById("pos_lng").value = event.latLng.lng(); 
     marker.setPosition(new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())); 
    }); 
}

，我剪輯了一點，所以忽略任何基本的拼寫錯誤的請。我沒有複製CSS到這一點，但我有以下應用到（有更多一點的話）MAP_HOLDER格：

overflow:hidden; 
z-index:-999;

整個事情的工作！ http://jsfiddle.net/n34_panda/gNdLV/

來源

2014-03-26 n34_panda

這裏沒有足夠的信息可以幫助你。給我們一個工作示例，顯示問題並告訴我們更多關於*錯誤顯示*的問題。 – MrUpsidown

乾杯，不正確顯示的問題是由於加載頁面時最初設置爲隱藏的div。一旦jquery擴大了面板，地圖不能正確填充瓷磚。此圖片與我的經歷非常相似，請注意它的中心位置不正確： - > http://i.stack.imgur.com/YaFZR.jpg 此鏈接與我的問題類似 - > http： //stackoverflow.com/questions/10949167/google-maps-does-not-render-correctly-in-ie8-within-iframe-nyromodallayer 我會盡量擴大我原來的帖子，以更詳細地解釋它 –

好。如果你可以做一個[jsfiddle]（http://jsfiddle.net），那會很棒。 – MrUpsidown

嘗試添加地圖調整大小作爲.show()函數的回調。

類似的東西：

function showMap() { 

    $("#MAP_HOLDER").show(resizeMap); 
} 

function resizeMap() { 

    google.maps.event.trigger(map, "resize"); 
}

這裏是一個JSFiddle證明。

我用IE和Chrome測試了它，兩者都像魅力一樣工作。希望這可以幫助。

來源

2014-03-26 15:34:10 MrUpsidown

是的，它正在調整大小的預期，但它不集中在選項中的協調設置...這是工作在IE瀏覽器，但不是在Chrome/Firefox中......我可以改變合作社，但然後IE不會工作感謝！ –

對。重置*中心怎麼辦？看到我更新的小提琴。 – MrUpsidown

是的，我已經嘗試過，看到原來的帖子很基本 - 我正在嘗試創建一個小提琴，但是CSS導致了RAD的浩劫。我想知道如果CSS是造成問題... –

Google Maps API - > Jquery Expandable地圖和瀏覽器問題

回答

相關問題