Vue系列:在vux的popup组件中使用百度地图遇到显示不全的问题
2016-09-27 15:40
926 查看
问题描述:将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/5769075.html),然后将BMapComponent作为vux的popup组件的子组件,代码如下:
[/code]
//BMapComponent的showMap方法定义如下:
[/code]发现地图总是显示不全。
原因分析: popup通过show属性来控制显示和隐藏,然后在内部通过watch该show属性的变化,再响应事件来执行相关的显示和隐藏的动作,由于vue是在独立的线程中去轮训那些被watch的变量的变化,这个轮训是有一定的间隔的,所以属性变化和动作执行之间是异步的。但是我们在代码中,showPositionContainer改为true之后马上就执行showMap,此时popup还没显示出来。
解决方法: 把selectPosition改为如下方式即可.
[/code]
来自为知笔记(Wiz)
<popup :show.sync="showPositionContainer" style="position:absolute">
<b-map-component v-ref:mapviewer :map-height="mapH"></b-map-component>
</popup>
[/code]
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) //开启信息窗口
},
[/code]发现地图总是显示不全。
原因分析: 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)
}
[/code]
来自为知笔记(Wiz)
相关文章推荐
- ScrollView嵌套使用ListView时遇到,Item显示不全问题
- Vue使用vux-ui自定义表单验证遇到的问题及解决方法
- vue项目中使用echarts 遇到问题总结2
- 问题杂记-Vue组件中使用地址引入图片
- 在 vuex 中使用 vux 的 popup 数据双向绑定
- vue -(问题系列)节点Sass无法为您的当前环境找到绑定:OS X 64位和Node.js 8.x(遇到)
- vue-vux使用 cell/cell-box 组件 点击展开其他内容的时候修改过的数据会复原解决思路之一
- vue.js遇到的问题-数组数据改变,页面不能实时显示
- Vue使用中遇到问题汇总(一)32个
- Vue使用中遇到问题汇总(二)
- Vue使用中遇到问题汇总(三)
- vue使用技巧及vue项目中遇到的问题
- 解决vue 中 echart 在子组件中只显示一次的问题
- 使用vue-router与v-if实现tab切换遇到的问题及解决方法
- vue-awesome-swiper组件不能自动播放和导航器小圆点不显示问题
- viewPager 结合 PagerSlidingTabStrip 使用tab文字显示不全问题探究
- 使用pl.droidsonroids.gif.GifImageView在安卓中显示动图遇到的问题
- 这是我学习COM遇到的几个基本问题其解决 黄森堂(vcmfc)著 1.我用ATL生成一个组件对象,我在COM中使用IDD_IEncrypt,这个在哪里写义,是啥?GUID? 答:IDD_IEncry
- Android中使用百度地图时定位到当前位置遇到的问题