Vue系列: 在vux的弹出组件中使用百度地图遇到不完整的显示问题

问题描述:

将百度地图打包到一个单独的组件BMapComponent中，有关详细信息，请参见Vue系列: 如何将百度地图打包到Vue组件（）中，然后使用BMapComponent作为vux弹出组件的子组件，代码如下:

<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属性控制显示和隐藏，然后在内部监视show属性的变化，然后执行相关的显示和隐藏操作以响应事件，因为vue在单独的线程中来训练那些观看此变量训练具有一定的时间间隔，因此属性更改和动作执行是异步的. 但是在我们的代码中mapinfo中怎么导入百度地图，将showPositionContainer更改为true后mapinfo中怎么导入百度地图，将立即执行showMap，此时不会显示弹出窗口.

解决方法:

将selectionPosition更改为以下方法.

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

来自Wiz Notes

发布于@ 2016-09-27 15:40未经阅读（...）评论（...）编辑而带走

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/tongxinshuyu/article-144948-1.html