首页 > 其他 > 详细

echarts+百度地图+vue 填坑记(一)

时间:2019-01-07 19:10:32      阅读:524      评论:0      收藏:0      [点我收藏+]

大概七月底开始实习,到现在经历了两个完整的项目(c2b)。

因为开发时间紧,任务重,所以在开发过程踩到的坑都没时间去记录。

现在在开发一个某链运输监控系统,到了收尾阶段,有时间写博客了!开心!

一、鼠标移入移出标注,信息框会产生闪烁

如下图:

技术分享图片

网上一堆解决的办法,一开始以为是事件冒泡(mouseover、mouseout),最多的就是设置setTimeout,其实就是延时,让闪烁的频率降低了。

在开发过程中用的就是这个方案,但是根本问题没有解决,还是会闪烁。

最近有时间去找原因,发现并不是事件冒泡导致的!!!其实是百度地图自带的信息框下边的指引条遮挡导致。

如下图:

技术分享图片

技术分享图片

 

 

接着查看百度地图自带信息框的效果是怎样写,发现那个指引条直接用的图片(http://api0.map.bdimg.com/images/iw3.png)。

技术分享图片

技术分享图片

好坑啊!!!接下来就是解决方法了。

方案一    将信息框向上偏移 

信息框的指示条与标注重叠或者很靠近,鼠标移入标注后,进入指示条的范围,但未离开标注,此时就会产生闪烁效果了。

var steelOpts = {
  title : "<b>车辆信息</b>" , 
  offset: new BMap.Size(0,-28) // 向上偏移 } carInfo[i] = new BMap.InfoWindow(htmlMain,steelOpts)

 

 技术分享图片

 

echarts+百度地图+vue 填坑记(一)

原文:https://www.cnblogs.com/zzcyeah/p/10213385.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!