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

查看:559
本文介绍了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部分地图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆