Google maps api v3 地图未完全显示

Question

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

问题是当我加载地图时它只加载了一半（见下面的 PS）。

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

这就是我创建地图的方式：

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 的大小尚未设置。

设置高度后执行初始化地图的函数。