Vue系列：在vux的popup组件中使用百度地图遇到显示不全的问题

问题描述：

将百度地图封装成一个独立的组件BMapComponent，具体见  Vue系列：如何将百度地图包装成Vue的组件 （http://www.cnblogs.com/strinkbug/p/5769075.html），然后将BMapComponent作为vux的popup组件的子组件，代码如下：

    
    
    
    

     
     
     
     
<popup :show.sync="showPositionContainer" style="position:absolute">
     
     
     
     
 <b-map-component v-ref:mapviewer :map-height="mapH"></b-map-component>
     
     
     
     
</popup>
    
    
    
    

    
    
    
    

     
     
     
     
selectPosition() {
     
     
     
     
 this.showPositionContainer = true
     
     
     
     
 var that = this
     
     
     
     
 that.$refs.mapviewer.showMap(that.mapInfo) 
     
     
     
     
 }
     
     
     
     
},
     
     
     
     

     
     
     
     

     
     
     
     
//BMapComponent的showMap方法定义如下：
     
     
     
     
showMap(mapInfo) {
     
     
     
     
 console.log('enter initMap')
     
     
     
     
 this.mapInfo = this.cloneMapInfo(mapInfo) 
     
     
     
     
 this.map = new BMap.Map("allmap")
     
     
     
     
 var point = new BMap.Point(this.mapInfo.longitude, this.mapInfo.latitude)
     
     
     
     
 var marker = new BMap.Marker(point)
     
     
     
     
 this.map.addOverlay(marker)
     
     
     
     
 this.map.centerAndZoom(point, 15)
     
     
     
     
 this.needCenter = false
     
     
     
     
 var infoWindow = new BMap.InfoWindow(this.mapInfo.address, this.opts) // 创建信息窗口对象
     
     
     
     
 this.map.enableScrollWheelZoom(true)
     
     
     
     
 this.map.openInfoWindow(infoWindow, point) //开启信息窗口
     
     
     
     
},
    
    
    
    

发现地图总是显示不全。

原因分析：

    popup通过show属性来控制显示和隐藏，然后在内部通过watch该show属性的变化，再响应事件来执行相关的显示和隐藏的动作，由于vue是在独立的线程中去轮训那些被watch的变量的变化，这个轮训是有一定的间隔的，所以属性变化和动作执行之间是异步的。但是我们在代码中，showPositionContainer改为true之后马上就执行showMap，此时popup还没显示出来。

解决方法：

    把selectPosition改为如下方式即可.

    
    
    
    

     
     
     
     
selectPosition() {
     
     
     
     
 this.showPositionContainer = true
     
     
     
     
 var that = this
     
     
     
     
 //此处加了个延时处理，因为popup的show属性响应没有那么及时
     
     
     
     
 window.setTimeout(function() { that.$refs.mapviewer.showMap(that.mapInfo)}, 150) 
     
     
     
     
}
    
    
    
    

来自为知笔记(Wiz)