javascript - ng-map 在 HTML 中显示部分 map

Question

我在 Angular.js 中使用 ng-map 出于某种原因，我的 map 图片在整个 map 的 90% 部分都是灰色的，如下所示:

我的 HTML 非常简单:

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

我什至试过像这样添加 CSS:

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

这是我的 Controller :

$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

当您的 map 被初始化时，它是在一个没有尺寸(0 宽度和/或 0 高度)的容器中完成的。所以 map 不知道它需要多大。

您应该在初始化 map 之前明确设置元素的宽度和高度尺寸，否则，调用 google.maps.event.trigger(map,'resize');(其中map 是 google map 的一个实例)如果你的 map 是在一个隐藏的元素上初始化的(没有宽度/高度)变得可见。

注意:

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

如果你想让 map 全屏，那么你必须设置html/body元素的高度:

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