我在项目中引入百度地图的卫星地图时,给marker绑定滑入滑出的监听事件动态打开和关闭信息窗口时,没办法流畅的打开和关闭窗口,离谱的是打开f12他就能流畅的实现这个效果。经过反复的测试,发现是因为你滑入这个标注时,几乎同时执行了一遍滑入滑出事件,我就想能不能给它加个setTimeout或者nextTick试试看运气,结果都失败了。过滤也过滤不掉,晚上回家都还在想这个问题怎么解决,最终也没个好的解决方案。大概晚上10点半的时候灵光一现,我让他滑入滑出只有一个能执行不就行了?
思路如下:
默认窗口是不弹出的,第一次滑入标注只让窗口打开,第二次只让滑出事件执行。虽然没有那么灵敏,但是差强人意了。具体代码如下:
marker.addEventListener("mouseout", (param)=> {
// alert("yichu")
if (_this.informationStatus==0) {
}else {
_this.mapModel.closeInfoWindow()
setTimeout(()=>{
_this.informationStatus=0
},100)
}
});
marker.addEventListener("mouseover",(param)=>{
console.log(marker)
// alert("yiru")
if (_this.informationStatus==0) {
_this.mapModel.openInfoWindow(new BMapGL.InfoWindow('<div style="width:280px;padding:5px 0.125rem;">\n' +
' <div style="border-bottom:1px solid #EBEAEA;padding:5px;font-size:16px">'+param.target.customData.dataInfo.name+'</div>\n' +
' <div style="margin:0.125rem 5px 5px 5px">\n' +
' <div style="display:flex;justify-content: space-between">安全运行天数<div style="color:#6aacfc;margin: 0 0.125rem">'+param.target.customData.dataInfo.safeRunTime+'天</div></div>\n' +
' <div style="display:flex;justify-content: space-between">备案容量<div style="color:#6aacfc;margin: 0 0.125rem">'+param.target.customData.dataInfo.filingCapacity+'</div></div>\n' +
' <div style="display:flex;justify-content: space-between">并网电压等级<div style="color:#6aacfc;margin: 0 0.125rem">'+param.target.customData.dataInfo.voltageLevel+'</div></div>\n' +
' <div style="display:flex;justify-content: space-between">消纳方式<div style="color:#6aacfc;margin: 0 0.125rem">'+param.target.customData.dataInfo.consumptionMethod+'</div></div>\n' +
' <div style="display:flex;justify-content: space-between">初并时间<div style="color:#6aacfc;margin: 0 0.125rem">'+param.target.customData.dataInfo.firstConnectionTime+'</div></div>\n' +
' </div>\n' +
' </div>',
opts),param.latLng);
setTimeout(()=>{
_this.informationStatus=1
},100)
}else {
}
});
深夜把这个问题改出来的时候很开心,但是发现谁也不能分享,左右无人在意,绕指柔过后也归于平静。网上也没有大佬写,某也就抛砖引玉了