触发谷歌地图调整大小

Question

我没有 JavaScript 或 jQuery 知识，我不知道如何处理这段 Google 地图代码。

我需要触发此 Google 地图调整大小代码：

google.maps.event.trigger(map, 'resize');

下面这个航点触发后需要触发上面的resize代码：

// Studio Page
jQuery('.studio-page').waypoint(function() {
jQuery('.kickass-studio').addClass( 'show animated bounceInLeft' );
jQuery('.location').addClass( 'show animated bounceInRight' );
jQuery('.geo-address').addClass( 'show animated bounceInDown' );

},
{
offset: '10%'
});

上面的代码是waypoints.js。我的问题是谷歌地图坏了（你只能看到地图的左上角）。但从我在 Stack Overflow 和其他论坛上发现的情况来看，这是因为在我的航点插件完成后 div 从display: none 变为display: block（添加类“show”）。所以我需要在航路点添加完这些类后触发谷歌地图调整大小。

我该怎么做呢？

编辑：

我试过这个：

// Studio Page
jQuery('.studio-page').waypoint(function() {
jQuery('.kickass-studio').addClass( 'show animated bounceInLeft' );
jQuery('.location').addClass( 'show animated bounceInRight' );
jQuery('.geo-address').addClass( 'show animated bounceInDown' );
var currCenter = map.getCenter();
    google.maps.event.trigger(map, 'resize');
    map.setCenter(currCenter);
},
{
offset: '10%'
});

但是将上面的调整大小触发器放在那里会使谷歌地图偏离我的标记所在的经纬中心点？

编辑：

这是我的地图脚本：

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
    var latlng = new google.maps.LatLng(-33.8333406,18.6470022);
    directionsDisplay = new google.maps.DirectionsRenderer();
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };
    var map = new google.maps.Map(document.getElementById("map"),myOptions);

    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
    var marker = new google.maps.Marker({
        position: latlng, 
        map: map, 
        title:"Get Directions"
    }); 
}
function calcRoute() {
    var start = document.getElementById("routeStart").value;
    var end = "-33.8333406,18.6470022";
    var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        } else {
            if (status == 'ZERO_RESULTS') {
                alert('No route could be found between the origin and destination.');
            } else if (status == 'UNKNOWN_ERROR') {
                alert('A directions request could not be processed due to a server error. The request may succeed if you try again.');
            } else if (status == 'REQUEST_DENIED') {
                alert('This webpage is not allowed to use the directions service.');
            } else if (status == 'OVER_QUERY_LIMIT') {
                alert('The webpage has gone over the requests limit in too short a period of time.');
            } else if (status == 'NOT_FOUND') {
                alert('At least one of the origin, destination, or waypoints could not be geocoded.');
            } else if (status == 'INVALID_REQUEST') {
                alert('The DirectionsRequest provided was invalid.');                   
            } else {
                alert("There was an unknown error in your request. Requeststatus: \n\n"+status);
            }
        }
    });
}

Answer 1

在调整大小后使用这些行将您的谷歌地图居中：

var currCenter = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(currCenter);