解决vue中mapbox地图显示一半的问题

解决vue中mapbox地图显示一半的问题

问题描述： 在vue中创建mapbox地图，地图只显示一般，查看浏览器开发者工具。发现将canvas.mapboxgl-canvas 的position:absolute去掉就解决了 。

代码修改：获取到canvas.mapboxgl-canvas,并修改其position样式就ok

修改前代码：

修改后

添加

this.map.on("load", () => {
    // Wait for map to load before modifying styles
    const canvas = this.$refs.mapContainer.querySelector('.mapboxgl-canvas');
    canvas.style.position = 'relative';
});

完整代码：