1

我显然有很多关于 CSS 的知识要学！

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

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

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

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

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

请注意，CSS 具有推荐的覆盖。当这些被省略时，地图是可见的——但只有 300 像素高。我知道这不应该那么难，而且我知道其他人已经按照上面列出的说明取得了成功。我只是无法让它工作。

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

4

1 回答 1

1

添加一些 CSS 并触发“resize”事件，您可以实现您的目标：

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);
});

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

于 2016-03-30T06:44:01.303 回答