谷歌地图api v3地图没有完全显示

Question

我正在使用jquery-ui-map插件向我的应用添加地图。

问题在于，当我加载地图时，它只被加载一半（见下面的PS）。

（我发现如果我打开Chrome Developer工具，则会完全加载地图。）

这是我创建地图的方式：

HTML:
<div>
    <div id="map_canvas"></div>
</div>

JavaScript:
$(window).load(function() {
    var mainNode = document.getElementById("map_canvas");
    var height = $(window).height() - $("#headerDiv").height() - $("#footerDiv").height();
    var width = window.screen.width;
    mainNode.style.height = height + "px";
    mainNode.style.width = width + "px";
});

$(function() {   
    //Create map and zoom to corrent position
    $('#map_canvas').gmap().bind('init', function(event, map) {
        zoomToCurrentPosition();                                                                                                                                                                                   
    });
});

function zoomToCurrentPosition() {
    $('#map_canvas').gmap('getCurrentPosition', function(position, status) {
        if (status === 'OK') {
            var clientPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            if (currentPositionMarker !== undefined) {
                currentPositionMarker.setMap(null);
            }

            currentPositionMarker = new google.maps.Marker({
                'position': clientPosition,
                'bounds': true
            });

            $('#map_canvas').gmap('addMarker', currentPositionMarker);

            $('#map_canvas').gmap({
                'center': clientPosition,
                'zoom': 7
            });

            $('#map_canvas').gmap('get', 'map').panTo(clientPosition);
        }
    });
}

Answer 1

初始化地图的功能将在DOMReady上执行，但设置高度的功能将执行onload（在 DOMReady之后会发生什么）。

在您初始化地图时，#map_canvas的大小尚未设置。

执行设置高度后初始化地图的功能。