NG-地图显示HTML部分地图

我使用NG-地图在Angular.js出于某种原因，我的地图画面变灰整个地图的90％，像这样：NG-地图显示HTML部分地图

我的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'）;作品

来源

2015-05-25 user2874945

可能重复的[如何做：我通过设定图的容器的宽度和高度为100％，加入一个id到NG-地图在html和通过将下一个代码进入状态的控制器固定的问题我调整谷歌地图与JavaScript后加载？]（http://stackoverflow.com/questions/743214/how-do-i-resize-a-google-map-with-javascript-after-it-has-加载） – laughingpine

确保贴图的父元素具有正确的尺寸。 – AndreaM16

当你的地图被初始化时，它是在没有尺寸（0宽度和/或0高度）的容器中完成的。所以地图不知道它需要的大小。

在地图初始化之前，您应该明确设置元素的宽度和高度尺寸，否则，如果您的地图已在隐藏元素上初始化，则请致电google.maps.event.trigger(map,'resize');（其中map是Google地图的实例）宽度/高度）变得可见。

注：

设置#map是height:100%没有影响，除非#map的父元素具有明确的高度。继续，将#map设置为height: 300px，你会突然发现它“起作用”。

如果您希望地图是全屏幕，那么你必须设置html/body元素的高度：

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

来源

2015-05-25 18:24:10 Adam

google.maps.event.trigger（map，'resize'）;成功了！谢谢！ – user2874945

我看着NG-地图的源代码，我发现了这片：

/** 
    * if style is not given to the map element, set display and height 
    */ 
    if (getStyle(element[0], 'display') != "block") { 
    element.css('display','block'); 
    } 
    if (getStyle(element[0], 'height').match(/^(0|auto)/)) { 
    element.css('height','300px'); 
    }

它将使用地图元素上的高度（以及可能的宽度）属性。所以easyest解决您的问题是简单地在地图上设置宽度和高度：

<div id="map"> 
<map style="width:100%;height:100%;"></map> 
</div>

编辑： NG-地图将设置div的高度后立即打电话google.maps.event.trigger(map,'resize');，让你不不得不。

/** 
    * resize the map to prevent showing partially, in case intialized too early 
    */ 
    $timeout(function() { 
     google.maps.event.trigger(map, "resize"); 
    });

来源

2015-06-28 03:18:03 kazmer

我使用UI-路由器（每个视图有其自身的地图）2次之间导航时有同样的问题。的

NgMap.getMap({id: 'myMapId' }).then(function(map) { 
    google.maps.event.trigger(map, 'resize'); 
});

来源

2016-11-22 21:02:36

NG-地图显示HTML部分地图

回答

相关问题