谷歌地图API：地图宽度得到调整onclick但路线仍然加载与原始宽度 [英] Google Maps API: Map width gets resized onclick but route is still loaded with original width

问题描述

我有通过Google Maps API v3加载的地图。
我有一个表单，它可以执行2个动作：1）调用函数来计算通过谷歌传输的路线，2）缩小地图宽度。

 <形式> 
< input type =textid =startname =start> 
< input type =buttononclick =reducemap（）; calcRoute（）;值= 转到 > 
< / form> 
 
 function reducemap（）{
 document.getElementById（map-canvas）。style.width =620px; 
} 
 
函数calcRoute（）{
 var start = document.getElementById（'start'）。value; 
 var end =罗马地址; 
 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）; 
 } 
}）; 
 
 $ / code> 

它就像一个魅力一样，唯一的问题是路线不居中因为它是用原始宽度（而不是缩小的）计算的。你可以在这里看到这里（所以你可以看看代码： http://goo.gl/wr3qi）。当您更改包含地图的DIV的大小时，您还需要通知Google地图API这个大小的变化。所以，假设你有一个 map 变量并且引用了map，你的 reducemap（）函数可能应该是：

 函数reducemap（）{
 document.getElementById（map-canvas）。style.width =620px ; 
 google.maps.event.trigger（map，resize）; 
} 
  




I have a map loaded via Google Maps API v3. I have a form which onclick performs 2 actions: 1) calls function to calculate the route via google transit, 2) reduces map width.

<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);
      }
    });
}

It works like a charm, with the only problem that route isn't centered because it's calculated with the original width (not the reduced one). You can see this live here (so you can take a look at the code: http://goo.gl/wr3qi).

解决方案

When you change the size of the DIV that contains the map, you also need to notify the Maps API about this size change. So, assuming you have a map variable with a reference to the map, your reducemap() function should probably be:

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

这篇关于谷歌地图API：地图宽度得到调整onclick但路线仍然加载与原始宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！