快捷導(dǎo)航

vue中mapbox地圖顯示一半的問題及解決方法

更新時間：2023年07月06日 15:20:49 作者：Sheyueyu

在vue中創(chuàng)建mapbox地圖，地圖只顯示一般，查看瀏覽器開發(fā)者工具，發(fā)現(xiàn)將canvas.mapboxgl-canvas 的position:absolute去掉就解決了，今天小編通過本文給大家分享詳細(xì)過程，感興趣的朋友跟隨小編一起看看吧

解決vue中mapbox地圖顯示一半的問題

問題描述：在vue中創(chuàng)建mapbox地圖，地圖只顯示一般，查看瀏覽器開發(fā)者工具。發(fā)現(xiàn)將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';
});

完整代碼：

<template>
    <main>
        <p>Center :{{center}}</p>
        <p>Zoom : {{ zoom }}</p>
        <div id="map" class="map-container" ref="mapContainer">
        </div>
    </main>
  </template>
<script>
import mapboxGl from "mapbox-gl";
export default {
    name:"MapMapbox",
    data(){
        return {
            center:[-93.1247, 44.9323],
            zoom:10.5
        }
    },
    mounted() {
    mapboxGl.accessToken = "your_mapbox_token";
    this.createMap();
    console.log(this.map)
},
    methods: {
        createMap() {
            this.map = new mapboxGl.Map({
                container: "map",
                style: "mapbox://styles/mapbox/streets-v9",
                minzoom: 5,
                center: this.center,
                zoom: this.zoom,
                hash: true
            });
            this.map.on("load", () => {
                // Wait for map to load before modifying styles
                const canvas = this.$refs.mapContainer.querySelector('.mapboxgl-canvas');
                canvas.style.position = 'relative';
            });
            this.map.on("move", () => {
                this.center = this.map.getCenter();
            });
            this.map.on("zoom", () => {
                this.zoom = this.map.getZoom();
            });
        }
    },
    beforeDestroy() {
    if (this.map) {
        this.map.remove();
    }
}
}
</script>
<style scoped>
.map-container {
  height: 500px;
  width: 100%;
}
</style>

到此這篇關(guān)于解決vue中mapbox地圖顯示一半的問題的文章就介紹到這了,更多相關(guān)vue中mapbox地圖顯示一半內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: