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类的一部分。

文档说明

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



全屏控制现在保留了中心。



无需再手动触发调整大小事件。

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

从版本3.32开始，

google.maps.event.trigger(map, "resize");没有任何影响

Answer 1

你已经找到了我要说的答案。无论何时更改地图容器（或可能是其父容器），resize事件都非常重要。就我而言，我在两个标签之间翻转（地图和行车路线）。首先，地图会在地图选项卡中正确显示，但切换到路线并返回地图会导致显示出笨拙。

如果你的地图只在一个角落显示一个小方块（在我的情况下是左上方），其余的空白机会你需要触发调整大小的触发器。

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

1 个答案: