Vue 引入百度地图,在调试工具中可看到代码,但是在页面上,显示空白..

Question

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

或者

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

审查元素里

页面上:

请问我代码是否写的有问题~~或者怎么改才能不空白呢..

Answer 1

大赞大赞大赞

Answer 2

找了一个小时,发现犯了一个非常愚蠢的错误!
我描述的问题,是可以初始化地图的

我定义的div是id,可是css中写的是class
因为高度的问题,所以没有加载出来!