在呈现方向后,在路线上居中显示V3 Google地图

Question

我有一个V3地图加载并默认以特定的经度/纬度为中心.加载后,用户可以输入他们的地址以获取指向该点的路线.发生这种情况时,会调整地图的大小以容纳其左侧的方向框.因此,路线在地图窗口中偏离中心.我尝试了以下代码,我认为它应该在逻辑上起作用,但无济于事.

新实现:如果我以任何方式调整窗口大小,它就会按预期开始工作.

发现问题:我需要google.maps.event.trigger(map, 'resize')在调整地图容器大小后触发.

directionsService.route(query, function(result,status) {
    if (status === google.maps.DirectionsStatus.OK) {
        // This sets the directions container to display:block and resizes the map
        document.getElementById('map-container').className = "directions";
        directions.setDirections(result);
        var bounds = result.routes[0].bounds;
        map.fitBounds(bounds);
        map.setCenter(bounds.getCenter());
    } else {
        alert("");
    }
});

更新2018-05-22

使用Maps JavaScript API版本3.32中的新渲染器版本,resize事件不再是Map类的一部分.

文件说明

调整地图大小后,地图中心将固定

• 全屏控制现在保留了中心.

• 不再需要手动触发resize事件.

来源:https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); 从版本3.32开始没有任何影响

Answer 1

你已经找到了我要说的答案。调整大小事件对于在更改地图容器（或者可能是其父容器）时正确执行非常重要。就我而言，我在两个选项卡（地图和行车路线）之间切换。起初，地图会正确显示在地图选项卡中，但切换到方向并返回地图会导致显示奇怪。

如果您的地图仅在一个角（在我的情况下为左上角）显示一个小图块，其余部分为空白，则您可能需要触发调整大小触发器。