NG-地图显示HTML部分地图

问题描述

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

I'm using ng-map in Angular.js For some reason my map picture is grayed out for 90% of the entire map, like so:

我的HTML是pretty简单：

My HTML is pretty simple:

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

我甚至尝试添加CSS像这样：

I've even tried to add CSS like so:

<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如果这可能会导致问题。

I have added the scripts for using ngMap. I have also removed any AdBlock if that might cause the issue.

编辑：google.maps.event.trigger（地图，'调整'）;作品

google.maps.event.trigger(map,'resize'); works

推荐答案

在你的地图被初始化，它是在没有尺寸（0宽度和/或高度为0）的容器这样做。因此，地图不知道它需要什么尺寸。

When your map was initialized, it was done so in a container with no dimensions (0 width and/or 0 height). So the map doesn't know what size it needs to be.

您应该明确你的元素上设置宽度和高度尺寸地图初始化之前，或者，做不到这一点，调用 google.maps.event.trigger（地图，'调整'）; （其中地图是谷歌地图的实例），如果你的地图是变得可见一个隐藏的元素（无宽/高）的初始化。

You should explicitly set width and height dimensions on your element before your map is initialized, or, failing that, call google.maps.event.trigger(map,'resize'); (where map is an instance of a google map) if your map was initialized on a hidden element (no width/height) that becomes visible.

注意：

设置 #map 是高度：100％有除非 #map无影响的父元素有一个明确的高度。来吧，设置 #map 是高度：300像素键，你会看到它作品突然

Setting #map to be height:100% has no effect unless #map's parent element has an explicit height. Go ahead, set #map to be height: 300px and you'll see it "works" all of a sudden.

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

If you want the map to be full screen, then you have to set the height of the html/body elements:

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

这篇关于NG-地图显示HTML部分地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！