Vue.js MapBox（MapBox gl vue）仅在容器宽度的50%上渲染贴图

我正在使用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' />

模板：

<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>

我已经尝试了CSS id中我所知道的一切，但它只在容器宽度的右半部分渲染贴图，在左半部分，只显示徽标和控件，而其余区域为空

---

在我看来，

div是动态的，或者在实例化之后呈现div。但是，我没有使用vue

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

如果使用
map.invalidateSize（）其中
map
是实例化的对象。这将重新绘制地图。尝试在加载窗口后放置此项以测试代码。然后，也许可以将其转换为正确的Vue实现

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

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

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

如果使用
map.invalidateSize（）其中
map
是实例化的对象。这将重新绘制地图。尝试在加载窗口后放置此项以测试代码。然后，也许可以将其转换为正确的Vue实现

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

为了解决这个问题，我只需从app.vue中的#app中删除“text align:center；”

有关更多详细信息，请查看我在此处打开的问题：
为了解决这个问题，我只需从app.vue中的#app中删除“text align:center；”

有关更多详细信息，请查看我在此处打开的问题：
我只有一个resize（）方法可用于对象。invalidateSize（）不可用，resize（）无效。是的，resize是GL等效值。尝试回拨@map load=“mapLoaded”并以这种方式调用它-有效吗？以这种方式尝试，它会被调用，但没有任何作用。然后我被难住了。如果你自己不能解决这个问题，我建议把它作为一个代码片段发布出来，以帮助其他SO用户帮助修复和测试它。如果你感兴趣，请检查我自己的答案。谢谢。我只有一个resize（）方法可用于对象。invalidateSize（）不可用，resize（）无效。是的，resize是GL等效值。尝试回拨@map load=“mapLoaded”并以这种方式调用它-有效吗？以这种方式尝试，它会被调用，但没有任何作用。然后我被难住了。如果你自己不能解决这个问题，我建议把它作为一个代码片段发布出来，以帮助其他SO用户帮助修复和测试它。如果你感兴趣，请检查我自己的答案。谢谢。因为我想保持
文本对齐：居中
，我在mapbox容器的周围添加了一个
，并使用
文本对齐：左谢谢。这对我有用。即使我没有使用
vue mapbox gl
，我也遇到了同样的问题。（我只是直接在Vue中使用mapbox gl）。它为我解决的问题太多了，而且有点担心它是如何在幕后编码的。对我来说，它解决了半屏幕，但也地图框水印样式，缩放不集中在鼠标和地图不可移动。。。无论如何，谢谢你，因为我想保持
文本对齐：居中
，我在mapbox容器的周围添加了一个
，并使用
文本对齐：左谢谢。这对我有用。即使我没有使用
vue mapbox gl
，我也遇到了同样的问题。（我只是直接在Vue中使用mapbox gl）。它为我解决的问题太多了，而且有点担心它是如何在幕后编码的。对我来说，它解决了半屏幕，但也地图框水印样式，缩放不集中在鼠标和地图不可移动。。。无论如何，谢谢你
window.addEventListener("load", function(){
    map.invalidateSize();
});;