Question

我显然对CSS有很多了解！

我使用VS2015和Cordova开发移动应用程序。我使用ngMap（http://ngmap.github.io/）来包装谷歌地图。我真的很喜欢图书馆！问题是它默认大小为300px，我的CSS技能太差而无法正确覆盖它。

我知道ngMap默认为300px，你可以指定default-style="false"然后在CSS中提供指定position: absolute; height:100%; width:100%的覆盖 - 这应该使地图填满页面。

当我尝试这样做时，我最终得到了这个：

当我接受默认行为时，我有一张工作地图，但它只有300像素高：

这里的Plunker很简单，但展示了我遇到的问题： http://plnkr.co/edit/8qfGaLBMgXFtluELZhCs?p=preview

请注意，CSS具有推荐的覆盖。当省略这些时，地图是可见的 - 但只有300px高。我知道这不应该那么难，我知道其他人已经按照上面的说明成功了。我无法让它发挥作用。

对于它的价值，当我将它部署到我的三星S5时，行为是一样的：我看到地图的左下角。任何帮助表示赞赏!!

Answer 1

添加一些CSS并触发＆＃34;调整大小＆＃34;事件你可以实现你的目标：

CSS：

body, html {
  height:100%;
  width:100%;
}

.map {
  position:absolute;
  height:100%;
  width:100%;
}

.scroll {
  height: 100%;
}

<强> JS：

NgMap.getMap({ id: "splashSearch" }).then(function (map) {
  vm.map = map;

  $timeout(function() {
    google.maps.event.trigger(map,'resize');
  }, 200);
});

分叉你的傻瓜：http://plnkr.co/edit/7dVCO8FpWxmLVVSMtqjH?p=preview

VS2015-Cordova-Ionic-Angular-ngMap：地图高度默认为300px

1 个答案: