javascript - google.maps.event.trigger(map, "resize") 问题

Question

感谢检查。我在使用 jquery 调整 map-canvas div 的大小时遇到​​此 .js 的问题。但是一旦它被调整大小，我需要实际的谷歌地图来重置它的边界，我正在使用 google.maps.event.trigger(map, "resize")，这是我的代码但是一旦它触发了 div 的大小调整，它由于未定义而无法运行调整大小 map 触发器？这是我的 .js

// JavaScript Document

// Scripts below in regards to instantiating the google map.
var map;

function initialize() {

var myLatLng = new google.maps.LatLng(-34.1840517,150.7131903);
var mapOptions = {
    zoom: 17,
    center: myLatLng,
    disableDefaultUI: true,
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.BOTTOM_LEFT
    }

};

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var marker = new google.maps.Marker({
    animation: google.maps.Animation.DROP,
    position: myLatLng,
    map: map,
    title: '6 Station Street, Douglas Park, 2569' 
});

var contentString = '<div id="mapContent">'+'TESTING'+'</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
});

}

google.maps.event.addDomListener(window, 'load', initialize);

$(function() {

    $("#expand-map").click(function() {
        $("#map-canvas").animate({"height" : "800px"}, 500);
        google.maps.event.trigger(map, "resize");
    });

});

Answer 1

在 animate 函数回调中 map-canvas 尺寸改变后，您刚刚调用初始化函数重新绘制 map 。

$(function() {
    $("#expand-map").click(function() {
        $("#map-canvas").animate({"height" : "800px"}, 500,function(){
            initialize();
        });

    });
});

看这里: 演示 jsfiddle