百度地图api中marker滑入滑出事件解决

我在项目中引入百度地图的卫星地图时,给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 {
            }
          });

深夜把这个问题改出来的时候很开心,但是发现谁也不能分享,左右无人在意,绕指柔过后也归于平静。网上也没有大佬写,某也就抛砖引玉了

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值