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。

我在页面加载后呈现的选项卡和 div 遇到过这个问题，例如在选项卡中或由 JavaScript 触发。

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

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

Answer 2

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

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

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

MapBox (mapbox-gl-vue) renders the map on only 50% of the width of the container

mapbox

vue.js

mapbox-gl-js

vuejs2