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

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

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

  1. selectPosition() {
  2. this.showPositionContainer = true
  3. var that = this
  4. that.$refs.mapviewer.showMap(that.mapInfo)
  5. }
  6. },
  7. //BMapComponent的showMap方法定义如下:
  8. showMap(mapInfo) {
  9. console.log('enter initMap')
  10. this.mapInfo = this.cloneMapInfo(mapInfo)
  11. this.map = new BMap.Map("allmap")
  12. var point = new BMap.Point(this.mapInfo.longitude, this.mapInfo.latitude)
  13. var marker = new BMap.Marker(point)
  14. this.map.addOverlay(marker)
  15. this.map.centerAndZoom(point, 15)
  16. this.needCenter = false
  17. var infoWindow = new BMap.InfoWindow(this.mapInfo.address, this.opts) // 创建信息窗口对象
  18. this.map.enableScrollWheelZoom(true)
  19. this.map.openInfoWindow(infoWindow, point) //开启信息窗口
  20. },
发现地图总是显示不全。

原因分析:

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


解决方法:
    把selectPosition改为如下方式即可.
  1. selectPosition() {
  2. this.showPositionContainer = true
  3. var that = this
  4. //此处加了个延时处理,因为popup的show属性响应没有那么及时
  5. window.setTimeout(function() { that.$refs.mapviewer.showMap(that.mapInfo)}, 150)
  6. }









上一篇:LaTeX用dvi编译,Yap浏览器弹出对话框,决解办法(傻瓜教程)


下一篇:java – Opencv – Features2D Homography结果不正确