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

Answer 2

在我看来，div有一些动态，或者在实例化后稍后呈现div。但是，我没有使用过vue。

我遇到了问题，并且在页面加载后呈现div，例如在标签中或由JavaScript触发。

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

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