不配圖總覺得不舒服砂竖、不完整真椿、不專業(yè)

這個是在vue項(xiàng)目中用js獲取可視區(qū)域的寬度，并賦值給盒模型

有點(diǎn)懶乎澄。突硝。。嗯置济，直接上代碼解恰，有注釋

            <template>
                <div style="height:100%;">
                    <div ref="homePage" class="map" id="Map">
                    </div>
                </div>
            </template>

            <script>
            /* eslint-disable */
            export default {
                name: "bdMap",
                components: {},
                data() {
                    return {
                        clientHeight:''
                    };
                },
                mounted() {
                    // 獲取瀏覽器可視區(qū)域高度
                    this.clientHeight = `${document.documentElement.clientHeight}`; 
                    const map = new BMap.Map("Map");
                    // 創(chuàng)建地圖實(shí)例
                    const point = new BMap.Point(116.404, 39.915);
                    // 創(chuàng)建點(diǎn)坐標(biāo)
                    map.centerAndZoom(point, 15);
                    // 初始化地圖锋八，設(shè)置中心點(diǎn)坐標(biāo)和地圖級別
                    map.enableScrollWheelZoom(true)
                    // 設(shè)置地圖可以縮放
                },
                watch: {
                    // 如果 `clientHeight` 發(fā)生改變，這個函數(shù)就會運(yùn)行
                    clientHeight: function() {
                        this.changeFixed(this.clientHeight);
                    }
                },
                methods: {
                    changeFixed(clientHeight) {
                        //動態(tài)修改樣式
                        console.log(clientHeight);
                        this.$refs.homePage.style.height = clientHeight - 154 + "px";
                    }
                }
            };
            </script>

            <style scoped>
            .map {
                width: 100%;
                height: 500px;
            }
            </style>

實(shí)現(xiàn)效果

測試項(xiàng)目截圖

想知道怎么引入百度地圖看我另一篇文章

• 傳送門 vue項(xiàng)目中引入百度地圖

這里卿洋
愿喜??