ng-map 在 HTML 中显示部分地图

Posted 2023-03-05

【中文标题】ng-map 在 HTML 中显示部分地图

【英文标题】：ng-map shows partial map in HTML

【发布时间】：2015-08-07 06:19:50

【问题描述】：

我在 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(map,'resize');作品

【问题讨论】：

How do I resize a Google Map with javascript after it has loaded? 的可能重复项

确保地图的父元素尺寸正确。

【参考方案1】：

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

您应该在地图初始化之前明确设置元素的宽度和高度尺寸，或者，如果您的地图是在隐藏的变得可见的元素（没有宽度/高度）。

注意：

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

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

html,body,#map  height: 100%; 

【讨论】：

google.maps.event.trigger(map,'resize');工作！谢谢！

【参考方案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");
    );

【参考方案3】：

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

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