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（地图，＆＃39;调整大小＆＃39;）;作品

Answer 1

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

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

注意：

将#map设为height:100%无效，除非#map的父元素具有明确的高度。来吧，将#map设置为height: 300px，您就会看到它，并且＃34;工作＆＃34;突然间。

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

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

Answer 2

我查看了ng-map的源代码，我发现了这篇文章：

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

它将使用地图元素上的高度（可能还有宽度）属性。 因此，解决问题的最简单方法是在地图上设置宽度和高度：

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

编辑： ng-map会在设置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");
    });

Answer 3

使用ui-router在两个视图之间导航时遇到同样的问题（每个视图都有自己的地图）。我通过将map的容器宽度和高度设置为100％来修复问题，在html中为ng-map添加id，并将下一个代码添加到状态的控制器中：

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