在bm-info-window里面操作会导致闪动

[leeycode]

[BUG 反馈] 在bm-info-window里面操作会导致闪动

浏览器版本号

chrome 版本 66.0.3359.181（正式版本） （64 位）

Vue 版本号

"vue": "2.5.10",

组件库版本号

"vue-baidu-map": "^0.21.8",

现象描述

点击地图，在地图上添加marker,infoWindow,跟circle覆盖物，在infoWindow里面有element-ui的滑块数组，拖动滑块会导致infoWindow闪动。

完整异常信息

<bm-marker @click="infoWindowOpen(marker,index)" v-for="(marker,index) in markerPosition" :position="{lng:marker.longitude,lat:marker.latitude}" :key=index :icon="{url:'http://dsp.behe.com/images/v1/images/lbs_ico.png', size: {width: 27, height: 34}}">
                        <bm-info-window :show="marker.show" @close="infoWindowClose(marker)" :position='{lng:marker.longitude,lat:marker.latitude}' :width=280 :height=170 :key="index">
                                <div class="info-wrap">
                                <el-input v-model="marker.name" placeholder="请输入自定义名称"></el-input>
                                <el-slider v-model="marker.detection_radius" :min=0 :max=15 :step=0.01 :format-tooltip="formatTooltip"></el-slider>
                                <p><span>0km</span><span style="padding:0 40px">半径：{{marker.detection_radius}}km</span><span>15km</span></p>
                                <p style="text-align:center">
                                    <el-button size="mini" @click="deleMarker(index)">移除</el-button>
                                    <el-button size="mini" type="primary" @click="comfirmAddMarker(marker,index)">确认</el-button>
                                </p>
                                </div>
                        </bm-info-window>
                        <bm-circle :center='{lng:marker.longitude,lat:marker.latitude}' :radius="marker.detection_radius*1000" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2"></bm-circle>
                    </bm-marker>

在线示例 / 仓库 URL

暂无

复现用例

暂无

预期输出

暂无

实际输出

暂无

[Dafrok]

是会闪，infoWindow 判断内部 DOM 元素发生改变就会重新渲染一下以达到自适应宽高的目的，实在没办法只能把这个 feature 砍掉了

[leeycode]

请问如何才能去掉这个自适应呢？试了很久没有找到办法。

[Dafrok]

源码里有个 mutationObserver，监听 DOM 改变的，去掉就不会闪了

[leeycode]

删掉nfoWindow.vue中的bindObserver方法，问题还是没有解决

[Dafrok]

那你就看看谁触发了 InfoWindow 或者 Marker 的 reload，InfoWindow 的 position, offset, maxWidth, Marker 的 clicking, label 属性的改变都会导致 InfoWindow 的重载，看一看你的业务逻辑里具体哪个操作触发了 reload

[xiaozeo]

你好，请问这个问题你解决了吗？ 最近我们这个项目也遇上了这样一个问题，还没找到相应的办法

[xiaozeo]

去掉reload好了

[monstereat]

去掉 reload 也不行，有办法解决吗？？看来得砍掉了。。。

[madaono]

读了下源码，这个可以这么解决：

1. 获取infoWindow的实例
   2.在this.$nextTice里执行 this.$refs.infoWindow.observer.disconnect()

[shen-lan]

@xiaozeo 怎么去掉reload ? 去掉源码里的reaload ?

[shen-lan]

@madaono 这个方法亲测可行 不过 ，我这边nextTick里也不行 ，在定时器里就可以了

[DreamerDragon]

去掉reload好了

请问怎么去掉reload呀

[xiaozeo]

@xiaozeo 怎么去掉reload ? 去掉源码里的reaload ?

你把源码下载下来 去掉后重新发布到npm 然后你引入你自己的就好了

[ghostyu]

读了下源码，这个可以这么解决：

1. 获取infoWindow的实例
   2.在this.$nextTice里执行 this.$refs.infoWindow.observer.disconnect()

有个[0]下标
this.$refs.infoWindow[0].observer.disconnect()

但是必须要给bm-info-window添加 width 和 height 参数，否则info window可能会变形

`
<bm-info-window
ref="infoWindow0"
:width="400"
:height="300"
。。。
<bm-info-window
ref="infoWindow1"
:width="400"
:height="300"
。。。

在地图和试图都ok后（可以是定时器，或者独立的一个事件来驱动），执行
this.$nextTick(() => {
this.$refs.infoWindow0[0].observer.disconnect()
this.$refs.infoWindow1[0].observer.disconnect()
})

这样多个窗口都会正常的加载，并且不会闪烁
`

[yaxproo]

@ghostyu 他的方法有用，我是放到updated生命周期中解决的
setTimeout(() => {
this.$nextTick(() => {
this.$refs.infoWindow.observer.disconnect();
})
}, 500);