Google Maps API-地圖放錯了框架

Question

鏈接： http ： //www.bastosviegas.com/mapa （請將鼠標懸停在“ interactivo”上以查看Google地圖）

如您所見，地圖沒有以正確的坐標為中心，並且在您最大化/最小化頁面之前，它會出錯。

有人遇到這個錯誤了嗎？ 如果是這樣，您是怎么做到的？

Answer 1

這不是錯誤，每當您操作包含地圖的div時，都應使用以下觸發器觸發地圖調整大小： google.maps.event.trigger(map, 'resize');

我將此觸發器添加到mouseover事件。

這是一個例子：

function initialize() {
    var map;
    var centerPosition = new google.maps.LatLng(38.713107, -90.42984);
    var options = {
        zoom: 6,
        center: centerPosition,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map($('#map')[0], options);

    //when map is shown, trigger resize
    $('#hoverbtn').hover(function(){
       $('#map').show(); 
       google.maps.event.trigger(map, 'resize');
    });

}

上面的代碼的小提琴示例