ng-map以HTML格式显示部分地图

Question

我在Angular.js中使用ng-map由于某些原因,我的地图图片在整个地图的90%处显示为灰色,如下所示:

我的HTML非常简单:

<div id="map">
<map></map>
</div>

我甚至试图像这样添加CSS:

<style>
    #map{
     width: 100%;
     height: 100%;
     margin: 0;
     padding: 0;
   }
</style>

这是我的控制器:

$scope.$on('mapInitialized', function(event, map) {
  $scope.map.setCenter(new google.maps.LatLng($scope.location.latitude, $scope.location.longitude));
  $scope.setZoom(4);
}

我添加了使用ngMap的脚本.如果可能导致问题,我也删除了任何AdBlock.

编辑:google.maps.event.trigger(map,'resize'); 作品

Answer 1

初始化地图时,它是在没有尺寸(0宽度和/或0高度)的容器中完成的.因此地图不知道它需要的大小.

在地图初始化之前,您应该在元素上明确设置宽度和高度尺寸,或者,如果您的地图在隐藏元素(无宽度/高度)上初始化,则调用google.maps.event.trigger(map,'resize');(如果map是Google地图的实例)可见.

注意:

设置#map是height:100%没有影响,除非#map的父元素具有明确的高度.来吧,准备#map好height: 300px,你会突然看到它"有效".

如果您希望地图全屏,则必须设置html/body元素的高度:

html,body,#map { height: 100%; }