前言

當產品提出一個新的需求，你的第一反應是不是皺眉頭 ? 聽完以後又心想“easy” ，然後勉為其難的擠出幾個字“可以吧” ? 產品問工期，你會 少説一兩天，多説那就沒譜了，週末前吧， 表現出需求不簡單的樣子 ? 其實這時心裏已經有了實現的大框...
於是產品前腳剛走，你就卯足了勁擼碼，恨不得兩分鐘實現

然後在擼碼的道路上走着走着會發現由於種種原因（技術選型、插件限制，改動太大...）導致此路不通，於是我們又要另闢蹊徑，繞着彎兒的實現需求

需求

現有功能：點擊圖中所畫區域，彈窗顯示具體信息，這裏用到的是高德地圖提供的信息窗體 對其自定義實現的彈窗

新增需求：點擊彈窗後，鼠標劃到其他區域，彈窗顯示該區域具體地址

實現

想法一

乍一看需求，easy,高德地圖這不就有現成的信息窗口彈窗嗎，用起來

只要代碼搭的好，二次開發不費力（代碼不怎麼樣，但這是實打實的道理，哈哈），照貓畫虎，給鼠標劃入加了彈窗，接下來看效果

有個大問題，劃入和點擊都用到高德的信息窗口這個api，但是他沒有提供同時打開多個的方法，所以當我點擊彈窗以後只要滑動就會觸發劃入彈窗導致點擊彈窗消失；

還有一個小問題是，我點擊的彈窗修改了默認彈窗樣式，而我劃入彈窗又不想要點擊彈窗的樣式，同時不需要關閉按鈕，但是他們共用同樣的class名，將關閉按鈕隱藏 兩個彈窗都會隱藏，當然這個小問題稍微繞點圈子加個判斷即可解決，只是稍顯麻煩...

總之這個方法離瑕疵太多

想法二

點擊彈窗多好看，信息又全，關鍵還簡單，同樣的代碼我cv就好了，勸勸產品經理吧

“咱不要點擊彈窗了，都劃入彈窗顯示所有信息吧”，“太大了不好看，而且蓋住其他區域了你不好劃入”

實踐才是檢驗真理的唯一標準，看效果

氣氛有點尷尬...

那能怎麼辦，繼續搗鼓吧

想法三

自己寫一個跟隨鼠標滑動的彈窗，監聽鼠標move事件，判斷劃入劃出所渲染的區域內控制是否顯示

1. 寫一個自定義的滿足要求的div作為彈窗，注意一定要絕對定位，默認不顯示

2. 頁面加載完成後綁定匿名函數實現div跟隨鼠標移動

   window.onload = function () {
     var box = document.getElementById("info_tit");
     document.onmousemove = function (event) {
    // 解決兼容問題
    event = event || window.event;
    // 獲取滾動條滾動的距離
    // chrome瀏覽器認為滾動條是body的，火狐等瀏覽器認為滾動條是html的
    var st = document.body.scrollTop || document.documentElement.scrollTop;
    var sl = document.body.left || document.documentElement.scrollLeft;
    // 獲取鼠標的座標
    var left = event.clientX;
    var top = event.clientY;
    // 設置div偏移量
    box.style.left = left + sl + 15 + "px";
    box.style.top = top + st - 40 + "px";
     };
   }

3. 鼠標移入區域內顯示對應的內容，移出隱藏

看效果

故事到此結束...

總結

條條大路通羅馬，但通往羅馬的路不總是一馬平川

奉上壁紙圖

翻譯一下：
“三思而後行”