打造基于GitHub的O2O應用：超炫的地圖交互

來自： http://www.phodal.com/blog/create-github-o2o-application-map-with-province-city/

或者你已經使用過了相應多的省市區與地圖聯動，但是這些聯動往往是單向的、不可逆。并且這些數據往往都是在線使用的，不能離線使用。下圖是一個結合百度地圖的省市區與地圖聯動：

我們可以在這個應用里選擇，相應的省市區然后地圖會跳轉到相應的地圖。當我們在地圖上漫游的時候，如果沒有顯示當前的省市區是不是變得很難使用。于是，我們就來創建一個吧：

相關技術棧：

• Bootstrap，UI顯示~~，地球人都知道。
• jQuery，Bootstrap依賴。
• Require.js，模塊化。
• Mustache，模板生成。
• Leaflet，交互地圖庫。

離線地圖與搜索

在GitHub上搜索數據的過程中，發現了一個名為 d3js-geojson 的項目里面放著中國詳細省、市、縣數據，并且還有及GeoJSON文件。

這就意味著兩件事：

• 地圖離線
• 多邊形搜索

地圖離線

首先，我們要知道GeoJSON是怎樣的一個存在。

> GeoJSON是一種對各種地理數據結構進行編碼的格式，基于Javascript對象表示法的地理空間信息數據交換格式。GeoJSON對象可以表示幾何、特征或者特征集合。GeoJSON支持下面幾何類型：點、線、面、多點、多線、多面和幾何集合。GeoJSON里的特征包含一個幾何對象和其他屬性，特征集合表示一系列特征。

換句話來說，根據這個文件里面的多邊形，我們可以繪制出中國地圖。由于上面的點是真實的地理位置信息，所以無論我們怎樣的縮放這些點的位置都不會發生變化。如下圖是GitHub對這個數據文件的解析：

（PS: 預覽可以打開這個頁面： Vmap GeoJSON

當然這似乎不是一個專業人員維護的數據，所以存在一些偏差。但是這些數據意味著，我們不需要依靠于在線地圖就可以完成大部分的功能了。在線地圖一直都是一個緩慢的存在，并且Google Map在多數人那都是不可用的。

接著問題來了，我們并沒有把每個用戶的數據存入到數據庫中，那么我們怎么才能實現搜索？

多邊形搜索

所謂的多邊形搜索就是畫一個圈圈（任意多邊形），然后你就可以去約這個圈圈里的人，如下圖所示：

而圈圈搜索依賴于圈圈上的連續的點構建的形狀來進行搜索，上面的每個點都包含了相應的經緯度。因此，只要是在這個圈圈里的用戶都是可以搜索得到的。

這樣實現的前提是：

• 要有一個支持多邊形搜索的搜索引擎，如ElasticSearch、Solr、MongoDB等等。
• 要將用戶的數據成功地存成GEO信息。

詳細信息可以見: VMap Bot

從地點到地圖上顯示

拿Bootstrap實現一個Dropdown是一件很容易的事，我們只要動用一下相應的模板就好了。難就難在，如果去與地圖交互。

最初的時候要用Event的形式來實現，但是發現這樣似乎會讓其緊耦合。就改用了監聽Hash Change的形式來實現，在總的地圖上每一個省都有一個對應的ID，這個ID會對應相應的省的數據。如下圖所示：

接著，我們就需要從這個Hash中判斷它的級別和ID，隨后轉由相應的函數來處理這些邏輯即可。隨后，我們要做兩件事：

• 創建對應省的市的Dropdown
• 從地圖上跳轉到省

創建對應省的市的Dropdown，我們只需要根據地點重新生成一個新的Menu再插入即可。

從地圖上跳轉到對應的省的時候：

1. 用Aajx請求獲取這個省的GeoJSON文件
2. 獲取這個市的中心位置，并對其進行縮放
3. 將上面的每個市繪制到地圖上

在這個過程中遇到的最大的坑是：中國有北京、上海、天津、重慶等直轄市，還有港、澳等自治區（PS：臺灣是一個省）。對于這些特殊的地點，那么的縮放級別肯定會更高。

同理，我們也可以對上面的市運行處理。但是因為這些市并不存在GEO信息，所以我只是從其多連形信息取了一個點，再將這個點放到data-geo中：

對應于省市的，對于區的處理也是如此。這樣，我們就完成了地點到地圖的顯示了。

從地圖到地點上顯示

從地圖上到地點就比較簡單了，點擊時修改對應的text即可。

Demo

在線Demo見： http://vmap.phodal.com/