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

要解决这个问题,我只需要删除"text-align:center;" 来自App.vue中的#app.

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