javascript - Google Maps API -> Jquery Expandable Map 和浏览器问题

Question

我一直在使用 Google Map API v3 开发一个页面并有一个快速的问题。基本上我使用 jquery 来隐藏/显示 map 面板 (MAP_HOLDER)，问题是这样的:

-> 在 Firefox 中，API 未正确填充 map Canvas ，它仅填充了大约 1/5 的图 block (看起来像预期 map 的最后 1/5)。不管怎样，为了解决这个问题，我将这段代码添加到 jquery 中的“扩展”函数中:

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

-> 现在我的主要问题是，如果我什么都不做， map 在 I.E 中正确显示，但在 Firefox 和 Chrome 中显示不正确。有没有其他人遇到过这种情况，我可以通过更改坐标来“修复”它，但这显然会扭转问题并使 I.E 不正确。

我曾尝试为“slideDown()”添加超时，但这对任何事情都没有帮助...

谢谢， 亚历克斯

编辑，更多信息> 我正在 RAD 平台上开发它，因此我很难提供代码。然而， map 基于两个 div，即外部 div 和 map Canvas 。我正在用 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);
}

map 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 div:

overflow:hidden;
z-index:-999;

一切正常! http://jsfiddle.net/n34_panda/gNdLV/

Answer 1

尝试将 map 调整大小添加为 .show() 函数的回调。

类似的东西:

function showMap() {

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

function resizeMap() {

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

这是一个 JSFiddle 来演示。

我用 IE 和 Chrome 对其进行了测试，两者都非常有效。希望这会有所帮助。