javascript - Google Maps API：地图宽度在点击时调整大小，但路线仍以原始宽度加载

Question

我有一张通过 Google Maps API v3 加载的地图。我有一个 onclick 执行 2 个操作的表单：1）调用函数来计算通过谷歌交通的路线，2）减少地图宽度。

<form>
    <input type="text" id="start" name="start">
    <input type="button" onclick="reducemap();calcRoute();" value="Go">
</form>

function reducemap() {
document.getElementById("map-canvas").style.width="620px";
}

function calcRoute() {
    var start = document.getElementById('start').value;
      var end = "An Address in Rome";
      var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.TRANSIT
      };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
}

它就像一个魅力，唯一的问题是路线没有居中，因为它是用原始宽度（而不是缩小的宽度）计算的。你可以在这里看到这个（所以你可以看看代码：http: //goo.gl/wr3qi）。

Answer 1

当您更改包含地图的 DIV 的大小时，您还需要将此大小更改通知 Maps API。因此，假设您有map一个引用地图的变量，您的reducemap()函数可能应该是：

function reducemap() {
    document.getElementById("map-canvas").style.width = "620px";
    google.maps.event.trigger( map, "resize" );
}