ng-map在HTML中显示部分地图 [英] ng-map shows partial map in HTML

问题描述

我在Angular.js中使用ng-map由于某种原因，我的地图图片显示为整个地图的90％，如下所示：

我的HTML很简单：

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

EDIT：google.maps.event。当你的地图被初始化时，它是在一个容器中没有这样做的，没有任何东西。

您应该明确地设置宽度和高度尺寸，以便您的尺寸（0宽度和/或0高度），因此地图不知道它需要什么尺寸。元素，否则调用 google.maps.event.trigger（map，'resize'）; （其中地图

注意：

设置 #map 为 height：100 ％没有效果，除非 #map 的父元素有显式高度。接下来，将 #map 设置为 height：300px ，你会突然看到它 。

如果你想让地图全屏，那么你必须设置 html / body elements：

  html，body，＃map {height：100％; } 
  

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:

My HTML is pretty simple:

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

I've even tried to add CSS like so:

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

Here is my controller:

$scope.$on('mapInitialized', function(event, map) {
  $scope.map.setCenter(new google.maps.LatLng($scope.location.latitude, $scope.location.longitude));
  $scope.setZoom(4);
}

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

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

解决方案

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.

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.

NOTE:

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.

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-map在HTML中显示部分地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！