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

Question

我显然有很多东西要学习 CSS！

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

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

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

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

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

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

值得一提的是，当我将它部署到我的三星 S5 时，行为是相同的：我看到了地图的左下角。感谢任何帮助！！

Answer 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

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

VS2015-Cordova-Ionic-Angular-ngMap: map height defaults to 300px

css

angularjs

cordova

ionic-framework

ng-map