Javascript ng映射在HTML中显示部分映射

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

我的HTML非常简单：

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

我已经添加了使用ngMap的脚本。我还删除了任何可能导致问题的AdBlock

---

编辑：google.maps.event.trigger（映射，'resize'）；工作

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

在初始化映射之前，应该显式设置元素的宽度和高度维度，否则，调用

google.maps.event.trigger（映射，'resize'）

（其中，

map

是谷歌地图的一个实例）如果你的地图是在一个隐藏的元素（没有宽度/高度）上初始化的，这个元素变得可见

注意：

将

#map

设置为

高度：100%

无效，除非

#map

的父元素具有明确的高度。继续，将

#map

设置为

高度：300px

，您将看到它突然“工作”

如果希望地图全屏显示，则必须设置

html/body

元素的高度：

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

---

我查阅了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>

---

我在使用ui路由器在两个视图之间导航时遇到了同样的问题（每个视图都有自己的地图）。我通过将map的容器宽度和高度设置为100%，在html中向ng map添加一个id，并将下一个代码添加到state的控制器中，解决了这个问题：

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

---

确保map的父元素具有正确的维度可能存在重复。google.maps.event.trigger（map，'resize'）；工作！谢谢

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

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

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