全屏显示这里的地图底部有黑条

Question

我正在Vue应用程序中使用Here Maps JS API。当切换到全屏模式时，我会动态设置渲染“此处地图”的容器的高度。 （100vh和100vw） 我还为地图注册了一个事件侦听器，以便它可以响应resize事件：

  window.addEventListener('resize', () => {
    this.map.getViewPort().resize();
  });

地图占据了整个页面，因为我可以在屏幕底部看到徽标，但是底部有一个黑条，没有地图详细信息：

可能是什么原因造成的？

Answer 1

看起来与正在使用的vue-fullscreen组件有关。直接调用全屏API不会遇到相同的问题，因此我们消除了对第三方的依赖，并在我们自己的组件中使用以下浏览器API：

this.$refs.map.requestFullscreen(); // $refs allows the retrieval of an element based on a ref attribute on the element

和

document.exitFullscreen();