Vue introduces Baidu Maps, and you can see the code in the debugging tool, but on the page, it shows a blank..

<baidu-map id="installMap" ref="installMap" :city="city" @ready="getLocation" :center="center"></baidu-map>

methods: {
    getLocation () {
        let position = new BMap.Geolocation()
        position.getCurrentPosition(pos => {
            this.center = pos.point
            this.city = pos.address.city
            this.initMap(pos)
        })
    },
    initMap(pos) {
        let map = new BMap.Map("installMap")
        let point = new BMap.Point(pos.point.lng, pos.point.lat)
        map.centerAndZoom(point, 10)
        map.setCurrentCity(pos.address.city)
    }
}

or

<div id="installMap" ref="installMap"></div>

mounted () {
    this.getLocation()
},
methods: {
    getLocation () {
        let position = new BMap.Geolocation()
        position.getCurrentPosition(pos => {
            this.center = pos.point
            this.city = pos.address.city
            this.initMap(pos)
        })
    },
    initMap(pos) {
        let map = new BMap.Map("installMap")
        let point = new BMap.Point(pos.point.lng, pos.point.lat)
        map.centerAndZoom(point, 10)
        map.setCurrentCity(pos.address.city)
    }
}

pos information

I would like to ask if there is something wrong with my code ~ ~ or how to change it so that it can not be blank.