Google Map不在Firefox中居中

Question

我在Google地圖上遇到了一個奇怪的問題，我只能在Firefox中復制它。 為了說明，我們有一個靜態地圖，單擊該靜態地圖會放大為一個完整的可交互地圖，中間帶有一個標記。 這在除Firefox之外的所有瀏覽器中都可以正常工作。 在Firefox中，會發生地圖未正確居中的情況。 標記被放置，但是它位於地圖的左上角，就在可見區域之外。

有任何想法嗎？ 這一直困擾着我一段時間。

JavaScript：

// lat and lng are initialized earlier
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
    zoom: 13,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
};

var map = new google.maps.Map($("#map_canvas")[0], myOptions);

var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    icon: icon
});

var resizeMap = function () {
    $("#smallMap, #smallMapOverlay").remove();
    $("#map_canvas").show();
    google.maps.event.trigger(map, 'resize');
    map.setCenter(latlng, 13);
};

$("#smallMapOverlay").live("click", function (e) {
    e.preventDefault();
    resizeMap();
});

CSS：

#map_canvas {
    width: 640px;
    height: 377px; 
}

Answer 1

Karim79的修復程序。 我以稍微不同的方式解決了問題。 如果您有一個包裝類來處理映射函數，則可以像這樣創建一個重置函數，

function reset(){
        setTimeout(function(){gm.event.trigger(_gMap, 'resize');}, 50);
        setTimeout(function(){_gMap.setCenter(settings.mapOptions.center);}, 100);
    }

最好

Answer 2

似乎將resize和setCenter方法放入show()的回調中，並稍加延遲即可解決此問題。

var resizeMap = function () {
    $("#smallMap, #smallMapOverlay").remove();
    $("#map_canvas").show(10, function () {
        google.maps.event.trigger(map, 'resize');
        map.setCenter(latlng, 13);
    });
};

這不是最優雅的解決方案，但它可以工作。