javascript - 谷歌地图 API : Map width gets resized onclick but route is still loaded with original width

Question

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

<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

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

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