誰說 LBS 小程序開發難？前端女王大人手把手教你

文 | 祝莎莎

了解小程序的人都知道， 小程序帶有一個地圖（）組件。

利用它，你可以在小程序中調用一個功能完整的地圖，讓小程序里所展示的地點更直觀、更精確。

那麼，小程序應該如何正確地使用地圖組件呢？

今天，知曉程序（微信號 zxcx0101）特意邀請了愛范兒前端女王大人。接下來，她會以「TIT 智慧園區」小程序為例，向你介紹小程序 組件的使用心得。

誕生背景

愛范兒所在的 T.I.T 創意園，前身是建於 1956 年的廣州紡織機械廠，園區佔地面積九萬多平方米，園內綠樹成蔭、鳥語花香，良好的環境吸引了諸多企業的入駐，包括：微信總部、Mo&Co、鉑濤孵化器等近百家企業，和許多特色商鋪。

TIT 園區的內部環境，有兩大特點：

面積廣：在園區內走一圈，需要半小時。

小路多：園內小徑交錯，難以辨識。

這兩大特點，讓對園區環境不熟悉、甚至來往多次的人，依然難以摸清道路。

愛范兒作為首批小程序內測機構，在小程序開發方面積累大量實戰經驗。自然地，我們就與所在園區的合作，推出了「TIT 智慧園區」小程序。

這種基於商圈的 LBS 地理展示及導航功能的小程序，有著廣泛的應用場景，如：城市商圈、高校、科技園區等等，會為用戶帶來極大便利，也為小程序開發者帶來更多機會。

主要功能

信息展示：按照企業分類，查看分類下的企業，並且會在地圖上標記出相應企業的位置。

步行導航：用戶可導航到自己想去的目的地，徹底解決再進入園區後兜圈子的問題。

停車找車：開車的訪客，可以在停好車後記錄停車點，取車時打開小程序就可以看到自己上次的停車位置，並導航到停車地點。

開發設計

從小程序前端開發角度來說：

WXML 是微信官方提供的一套標記語言

WXSS 為 CSS 子集

至於腳本邏輯語言，則是前端工程師熟知的 JavaScript

即便在小程序中 JavaScript DOM API 無法使用，但整體而言，開發小程序前端部分所需的技術棧還是我們所熟知的那套東西。

後端則接入了知曉雲 BaaS 服務，步入快速開發小程序模式。

1. 數據表設計

使用知曉雲後台數據模塊，可以輕鬆創建業務所需的數據表。

這裡重點列出兩張數據表，以及表內關鍵欄位。在後台成功創建數據表後，下載最新版知曉雲 SDK ，使用獲取到的 ，就可以對數據表執行操作。

首先是商戶信息表 ，它的 為 。

該表關鍵欄位如下:

然後就是停車記錄表 ，它的  為 。

關鍵欄位如下：

2. 前端設計

布局設計

合理布局解決地圖組件層級高於 WebView 層級問題：我們嘗試使用 Android 設備，開啟開發者選項中 Show layout bounds（顯示布局格子）選項，再進入智慧園區小程序。

我們所看到的界面如下圖所示。

Android 開發者選項中 show layout bounds 是一個很常用的功能，開啟後可以知道界面上哪部分是用 Native 實現、哪部分是用 Hybrid web 實現。

從截圖中可以得出，小程序的 組件是使用 Native 來實現的，它並不是一個 WebView 容器，而原生組件的特性是它總會覆蓋在 WebView 組件之上。

所以對於導航頁的布局，我們按照如下代碼來設計：

利用 頁面對 組件採用絕對定位、高度自適應的方法，實現 WebView 組件不被地圖組件遮蓋、地圖組件又可隨 WebView 組件尺寸，動態改變高度。

此外，當用戶點擊地圖上標記的停車位置時，需求是要以彈窗形式詢問用戶下一步操作。

由於開發上無法實現在原生的 map 組件上彈出 WebView 蒙層，結合產品特點，我們當時選用了一種比較簡單可操作的實現。

即，當需要在 map 組件之上彈出蒙層時：

隱藏 map 組件和相關的不需要的 WebView 元素（比如頂部的分類條和地步的商戶列表）。

使用一張以園區中心點定位的地圖圖片來作為背景元素。

在該背景圖片上覆蓋 WebView 彈窗。

等用戶操作結束後再隱藏圖片，恢復 map 和相關組件的展示。

其實，解決該問題的更好的辦法，是通過使用小程序的畫布 Canvas 組件來實現，因為畫布也是使用 Native 組件來實現的。

具體方式是：先使用 Canvas 繪製一個蒙層，再在 Canvas 蒙層上繪製 Canvas 彈窗。

需要注意的是，彈窗中的小車圖標，無法使用網路圖片繪製，請將該圖片放在本地資源文件夾中。感興趣的同學可以 clone 本項目，自己動手實驗。

解決 布局垂直方向高度問題： 是 組件的屬性，它允許開發者在 組件上使用本地資源圖片來渲染地圖控制項。

下圖中使用紅色選中框選中的三個按鈕即為 ，分別代表：

用戶位置：點擊後觸發更新用戶位置，將用戶位置設置為 map longitude 和 latitude 值。

T.I.T 動態：點擊後跳轉到動態頁。

停車找車：點擊後顯示彈窗，詢問用戶是記錄停車還是導航到停車地點。

屬性列表（部分引自官方文檔）：

有 4 個屬性，分別為 。

也就是說，開發者要想在界面上安排一個控制項的位置，只能通過設置這 4 個屬性來實現。而這 4 個屬性的單位都是像素（px）。

我們的做法是，以 iPhone 6（邏輯像素 375×667）作為基準設備，來進行不同尺寸屏幕適配。

代碼如下圖所示，可以實現在不同設備上都有比較好的展示。

數據獲取

商戶信息獲取：數據獲取部分主要介紹商戶經地理位置的採集。商戶經緯度採集我們採用了高德開放平台，輸入商戶名，獲取其坐標點。

例如，在輸入框輸入「愛范兒科技」的結果如下圖:

商戶的其他信息，也是交由商戶完善，再使用 CSV 格式，導入到前述 數據表中。

用戶位置獲取：用戶進入導航頁後會請求獲取用戶地理位置。獲得用戶授權後，會使用 API 獲取用戶位置。

注意，該 API 默認 取值為 。為了在地圖上顯示在正確的位置，則 需要設為 ，也就是我們平常所說的「火星坐標系」（官方稱「地形圖非線性保密處理演算法」）。

關於 WGS-84 和 GCJ-02，我們需要了解的是：GPS 全球定位系統的經緯度坐標使用標準 WGS-84，換到使用 GCJ-02 的中國網路圖上時，會造成距離在 500m 左右不等的顯著偏移。

更多信息，可以在網路上搜尋有關「中華人民共和國測繪限制」的資料。

兩點間距離獲取：兩點間距離使用騰訊地圖的距離計算 API 得出。調用距離獲取和線路導航功能介面，都需要事先獲取調用 key 才可以使用。

導航路線點獲取：由於商戶的地理位置信息是使用高德地圖採集到的。同時，高德地圖也推出了自己的微信小程序 SDK，所以路線規劃我們引入了高德地圖的小程序版 SDK 來求取。

將獲取到的路線數組，設置為 組件 的數據源即可。

3. 地圖組件其餘重要屬性

4. 路由規劃

在小程序中，所有頁面的路由全部由框架進行管理。

而小程序有 5 層頁面棧的限制，即如果在頁面切換過程中，頁面棧內頁面數量超過 5，小程序將無法再進行跳轉，或者發生一些意外行為。

所以我們在開發小程序時，一定要規劃好小程序的頁面棧，或結合產品進行跳轉優化，或者從根源上精簡需求，以期開發出更實用更健壯的小程序。

下圖展示了這個小程序的頁面棧的流動。紅色標線代表的路徑為 BECG，經過 G 到達 6 – 導航頁時，頁面棧達到可容納的最大頁面數。

此時，在地圖頁只允許進行兩種操作：

第一種是按左上角，上一層「商戶詳情」頁面，在詳情頁則只能繼續返回上一層或者再次進入導航頁，不會出現爆棧的情況。

第二種方法，是通過判斷頁面棧中是否存在地圖頁。存在的話，則返導航頁顯示回到地圖控制項，用戶點擊後將直接調用 加 參數，直接跳回多級到地圖頁。

另需注意的是，並不是所有導航 API 都可以攜帶參數，設計路由時也要同時考慮參數傳遞問題。

要了解更多，請參考小程序官方文檔中的「頁面路由」部分及「導航 API」部分。

最後的話

本文剝離業務實現，從使用知曉雲 BasS 服務入手，介紹了數據表設計、小程序頁面棧設計及注意事項，以及導航頁面設計過程，和地圖使用中常見問題和重點屬性介紹。

希望能對開發者帶來實質的幫助，感謝您的閱讀。

另外，後期知曉雲將會為大家帶來有關 Canvas 組件的深度解析文章，敬請關注知曉程序（微信號 zxcx0101），獲取更多開發技巧。

「TIT 智慧園區」小程序使用鏈接

https://minapp.com/miniapp/2963/

關注「知曉程序」公眾號

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！