MapBox (mapbox-gl-vue) 仅在容器宽度的 50% 上渲染地图

Question

我正在尝试使用 Vue 2 的 MapBox，但我无法使地图占据容器的整个宽度。它仅在容器宽度的 50% 处呈现。

我在 index.html 的头部包含了如下文件：

<script src='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.js'></script>

<link href='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.css' rel='stylesheet' />

我想要一个组件中的地图（Map.vue，我用的是vue-router），所以这里是Map.vue中的代码：

脚本：

import Mapbox from 'mapbox-gl-vue';

export default {
  components: {
     'mapbox': Mapbox
  }
}

模板：

<mapbox access-token="pk.eyJ1Ijoic3BlZW5pY3Q....."
    :map-options="{
      style: 'mapbox://styles/mapbox/streets-v9',
      center: [-96, 37.8],
      zoom: 3
    }"
    :geolocate-control="{
      show: true, 
      position: 'top-left'
    }"
    :scale-control="{
      show: true,
      position: 'top-left'
    }"
    :fullscreen-control="{
      show: true,
      position: 'top-left'
    }">>
  </mapbox>

风格：

 #map {
 width: 100%;
 height: 600px;
 position: absolute;
 margin:0;
 z-index:1;
}

我已经在 CSS id 中尝试了我所知道的所有内容，但它仅在容器宽度的右半部分呈现地图，在左侧仅显示徽标和控件，而其余区域为空.

Answer 1

在我看来，div 有一些动态的东西，或者 div 在实例化后稍后呈现。不过我没用过vue。

在页面加载后（例如在选项卡中或由 JavaScript 触发）呈现的选项卡和 div 存在此问题。

如果您使用map.invalidateSize();，其中map 是实例化的对象。这将重绘地图。尝试在加载窗口后放置此代码以测试代码。那么或许可以转换成正确的Vue实现。

window.addEventListener("load", function(){
    map.invalidateSize();
});;

Answer 2

为了解决这个问题，我只需要删除“text-align: center;”来自 App.vue 中的#app。

有关更多详细信息，请查看我在此处打开的问题： https://github.com/phegman/vue-mapbox-gl/issues/11