0

我在现有的大型 Angular 5/Ionic 3.9 应用程序中包含了一张地图。使用 Openlayers 版本 5.0.2

我还需要包括全屏视图。

在 Firefox 中，全屏视图有效。在 Chrome 中，切换到全屏可以工作，但没有加载地图，地图的 div 也不存在。

我试图将 FullScreen 的源设置为具有 id/class fullscreen 的 div

<div id="fullscreen" class="fullscreen">
    <div id="map" class="db-map"></div>
</div>

let fullscreenTarget = document.getElementById('fullscreen').parentElement;

  controls: DefaultControls({
      attribution: false
    }).extend([new FullScreen({
      source: fullscreenTarget
    })]),

我也尝试了几个像这样的css修改

.db-map{ 
  #map {
      margin: 5;
      font-family: sans-serif;
      height: 100%;
      width: 100%;
      -webkit-full-screen: 100%;
      -moz-full-screen: 100%;
      -ms-fullscreen: 100%;
    }
}
.fullscreen {
  height: 100%;
  width: 100%;
}
.db-map.fullscreen {
  height: 100%;
  width: 100%;
}

虽然检查 html 页面 chrome 显示： Chrome 全屏元素

火狐显示： 火狐全屏元素

但是没有任何效果，我不知道我可以尝试什么。

只是对上述问题的跟进，全屏在 Firefox 中工作，但在 Chrome 中没有。使用新版本的 Chrome，该缺陷已得到修复，现在可以正常工作。

4

0 回答 0