google-maps - 全屏地图未正确显示

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

 }

但它导致：

• http://pixs.ru/showimage/Snimokpng_5811285_6065704.png
• http://pixs.ru/showimage/Snimok1png_4265065_6065745.png

我的地图没有完全显示。

Answer 1

显示地图时触发google.maps.Map resize 事件（在您设置将显示的 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') 。