Question

我希望全屏打开地图。我试过这个：

<div class="b-firm-map-content" id="map"></div>
<a href="#" onclick="test2();return false;" >full screen</a>

    function test2(){
    var width  = $(window).width()-3;
    var height = $(window).height();


    $('#map').css({
        'width': width,
        'height': height - 40 ,
        'position': 'absolute  ',
        'z-index'   : '900'
    });

 }

但结果是：

我的地图未完全显示。

Answer 1

显示地图时触发google.maps.Map调整大小事件（在设置了将显示的div的大小之后）。

Answer 2

更新你的test2（）函数：

function test2(){
  var width  = $(window).width()-3;
  var height = $(window).height();

  $('#map').css({
    'width': width,
    'height': height - 40 ,
    'position': 'absolute  ',
    'z-index'   : '900'
  });

  google.maps.event.trigger(your_map, 'resize');
}

将 your_map 替换为包含地图对象的变量名称。

这是一个解决方案，即API不知道您何时以编程方式调整地图容器的大小。来自文档：

当div更改大小时，开发人员应在地图上触发此事件：google.maps.event.trigger（map，'resize'）。

全屏地图无法正确显示

2 个答案: