Vue系列：在vux的popup組件中使用百度地圖遇到顯示不全的問題

時間 2019-11-10

標籤 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>

   
   
   
   
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    //BMapComponent的showMap方法定義以下：
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
   
   
   
   
selectPosition() { this.showPositionContainer = true var that = this that.$refs.mapviewer.showMap(that.mapInfo)  }},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) }