做一個青海專案時，涉及到地圖，簡單顯示青海省個地區的用了一個svg外掛，要求顯示熱點資料的就用了百度的地圖API。地圖的確高大上。

回顧一、後臺老大哥負責跟客戶溝通的，突然有一天客戶要求說登入頁顯示地區的地圖要有3D效果。心裡頓時有一萬匹草泥馬奔過~~

                百度許久，沒找到可用的方案，最終這種需求被開發說了No！

回顧二、另一個系統的登入頁，因為使用者要選擇自己所在的地區才可以登入。要求下拉框選中地區時，對應的地圖區域自動高亮；選中區域時，下拉框自動選中對應區域。

                沒辦法，只有深入分析原始碼。原始碼還好沒有uglify，不然要死去活來。沒註釋就只有程式碼即註釋。但裡面的函式呼叫有點反人類。

雖然崗位是前端，但對圖形學還是感興趣的。於是就打算寫個簡單的地圖~談不上造輪子，算是前期的技術儲備吧。

關於為什麼造輪子，這個值得一看：http://blog.csdn.net/foruok/article/details/51403890

下面進入正題。

涉及到的知識點：

1. 點在多邊形內演算法：https://www.zhihu.com/question/26551754/answer/33185339
2. 3次貝塞爾曲線演算法

給定散點陣列，繪製光滑的閉合曲線。雖然canvas有貝塞爾曲線的API，但這樣就不好判斷指定點是否在閉合曲線美了。

不用svg，那樣豈不是顯得自己很low？而且還要先計算好控制點。作為一名(I)程(am)序(front)員(end)，重複的工作必須用程式設計解決！！！

找過不少擬合閉合曲線平滑的文章沒什麼收穫，只能用貝塞爾曲線，但都被控制點的計算問題攔了下拉，畢竟工作之外的時間很寶貴，太複雜的演算法太耗時間(我數學不好)。

     終於兩天前意外發現了一篇文章，提出了簡便解決控制點計算的問題。

    傳送門：http://blog.csdn.net/hzsjun/article/details/24958773

    之前就已經實現了知識點1，一個晚上就大致完成了地圖。今晚發現有bug，修改了下就打算寫這篇文章。

   開始工作時有點忙，而且人有比較懶，都沒怎麼寫部落格。

  來兩張圖：(紅點是資料點)

水印竟然不是我的大名，要它幹嘛？

最後附上下載地址：sorry，剛剛上傳等有時間來更新~如果忘了，可以給我留言~

補上地址：http://download.csdn.net/detail/ruanjiayou123/9700407