echarts+百度地圖+vue 填坑記(一)(百度地圖、鼠標移入移出標注,信息框會產生閃爍)


大概七月底開始實習,到現在經歷了兩個完整的項目(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)

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM