vue.js - MapBox (mapbox-gl-vue) 只在容器宽度的 50% 上渲染 map

Question

我正在尝试使用 Vue 2 的 MapBox，但我无法让 map 占据容器的整个宽度。它仅呈现容器宽度的 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 (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 中知道的所有内容，但它只在容器宽度的右半部分呈现 map ，在左侧仅显示 Logo 和控件，而其余区域为空.

Answer 1

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

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