摘要：你就可以在目錄下用或者開發(fā)應(yīng)用代碼了設(shè)計原理結(jié)合了高德地圖多個功能，比如定位，地圖縮放，繪制折現(xiàn)，進(jìn)行點(diǎn)的標(biāo)記等常用功能。文件源代碼打包運(yùn)行開發(fā)完畢后，我們可以運(yùn)行命令，讓它安裝到我們的測試手機(jī)上。

Weex正如它的目標(biāo)，

一套構(gòu)建高性能、可擴(kuò)展的原生應(yīng)用的跨平臺開發(fā)方案

Weex 給大家?guī)淼臒o疑是客戶端開發(fā)效率的提升，我們可以通過一套代碼，實(shí)現(xiàn)web，android, iOS的三個平臺上運(yùn)行。自己最近嘗試了一次借助weex的插件機(jī)制，使用Weex-Amap地圖插件 可以開發(fā) LBS 相關(guān)的應(yīng)用。

首先我們先來看下運(yùn)行的效果吧:

iOS 版

Android 版

截圖數(shù)據(jù)僅供參考

它大概具備下面的一些功能;

統(tǒng)計用戶在運(yùn)動過程中的距離累計，時間計算等。

存儲用戶的運(yùn)動數(shù)據(jù)

使用地圖定位和距離計算的API，實(shí)現(xiàn)距離統(tǒng)計。

顯示地圖折線，通過對定位的數(shù)據(jù)地理位置進(jìn)行折線繪制

統(tǒng)計用戶運(yùn)動的數(shù)據(jù)，計算總距離和時間

點(diǎn)擊用戶的歷史記錄，可以查看軌跡

感覺和大家所用到的app功能相差不多了，但實(shí)際上我們借助 Weex 和 Weex-Amap 插件可以非?？焖俚膶?shí)現(xiàn)這些功能，下面我們來看下具體怎么實(shí)現(xiàn)吧。

使用 weex-toolkit 創(chuàng)建項目

首先我們按照官網(wǎng)的教程安裝weex-toolkit。如果已經(jīng)安裝過請忽略。

$ npm install -g weex-toolkit

安裝完成后，我們創(chuàng)建一個項目目錄，比如running-app。

weex create running-app

大家可能會看到下面的提示，輸入y安裝即可。

This command need to install weexpack. Install now? Yes

項目創(chuàng)建完成后，我們需要添加我們的運(yùn)行平臺比如android或者ios，這里我們添加 android 平臺。

weex platform add android

添加成功后，我們在通過weex的插件機(jī)制，安裝weex-amap高德的地圖依賴。

weex plugin add weex-amap

安裝完成后，你可以到項目目錄 plugins 里面看下是否有新增的 weex-amap 的項目目錄，如果存在即表示插件安裝成功。你就可以在src目錄下用we或者vue開發(fā)應(yīng)用代碼了

設(shè)計原理

[weex-amap]結(jié)合了高德地圖多個功能，比如定位，地圖縮放，繪制折現(xiàn)，進(jìn)行點(diǎn)的標(biāo)記等常用功能。實(shí)現(xiàn)一款跑步應(yīng)用，我們需要解決最核心的問題就是：

統(tǒng)計一個在運(yùn)動過程的總距離 (s)

當(dāng)我們能夠獲取到總距離(s)的時候，和運(yùn)動時間(t) 通過小學(xué)物理知識，我們知道:

速度(v) = 總路程(s) / 總時間(t)

在結(jié)合一些公式，我們還可以計算出我們的 卡路里(c);

其中 weex-amap 正好可以解決上面最為核心的問題，我們可以通過定位，然后在通過比較兩個連續(xù)點(diǎn)之間的距離，進(jìn)行累加(微分累計)，從而獲取總距離。(當(dāng)然這只是最為簡單的實(shí)現(xiàn)原理，做成完整的app還需要更加科學(xué)化的算法)

[weex-amap] 其中提供了這么兩個API

getUserLocation 用于獲取用戶的當(dāng)前位置地理位置,用戶會獲取經(jīng)緯度 [Long, Lat]

getLineDistance 用戶獲取傳入的兩個地理位置的直線距離

除了這兩個API，我們還需要用到地圖的一個組件, 就是折線繪制 weex-amap-polyline 。它可以通過path屬性接收到一組地理位置坐標(biāo)值，從而在地圖上繪制連續(xù)的折線。比如:

其中 your_path 指定類似這樣的數(shù)據(jù)： [[116.487, 40.00003],[113.487, 40.0002]...]

關(guān)于更多的如何使用weex-amap 插件，可以參考這篇 文章 以及 官方Demos

設(shè)計頁面功能和邏輯

大家也都用過跑步的APP,常見的界面布局如下:

那么我們頁面的基本結(jié)構(gòu)就已經(jīng)出來了:

其中 我們使用了weex-amap組件，其中一些屬性:

zoom 表示設(shè)置的地圖的縮放級別

geolocation 添加地圖定位插件沒如果你需要定位功能，必須設(shè)置

sdk-key 設(shè)置地圖的密鑰，這是地圖開發(fā)必須申請 (前往高德地圖申請)

center 設(shè)置地圖的中心，需要設(shè)置一個數(shù)組，傳入地理位置坐標(biāo)[116.487, 40.00003]第一個數(shù)字表示經(jīng)度，第二個值表示緯度

其中的樣式參考如下,當(dāng)然你也可以自己實(shí)現(xiàn)一個布局：

.container{
  position: relative;
  flex: 1;
  min-height: 600;
  background-color: #eee;
}
.map{
  flex: 1;
  min-height: 600;
}
.map-controller{
  z-index: 10000;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 500;
  background-color: rgba(255,255,255,1);
  border-top-width: 2;
  border-top-color: rgba(0,0,0,.25);
}
.distance-wrap{
  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.dashboard{
  flex: 1;
  flex-direction: row;
}

.btn-wrap{
  flex: 1;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

定義數(shù)據(jù)模型

我們需要在界面里顯示四組數(shù)據(jù):

運(yùn)動距離

運(yùn)動時間

運(yùn)動消耗

運(yùn)動配速

自己設(shè)計的runningData里面包含了下面一些數(shù)據(jù):

runningData: {
  distance: 0,  // 表示運(yùn)動的累計距離
  miles: 0,    // 表示運(yùn)動的累計距離，單位是公里用于界面顯示
  path: [],    // 運(yùn)動坐標(biāo)數(shù)據(jù)
  time: "00:00:00",  // 用于界面的運(yùn)動時間顯示
  seconds: 0,   // 運(yùn)動的時間，單位：秒
  speed: 0,    // 配速 
  calories: 0,  // 運(yùn)動的消耗，單位千卡
}

處于計算的方便其中我設(shè)計了幾個用于數(shù)據(jù)格式的轉(zhuǎn)換和計算，在我的 utils.js 里面。

這個時候我們需要在模板里面添加一些代碼用于顯示這些數(shù)據(jù);

添加地圖折線polyline

添加流程控制

在我們進(jìn)行跑步的過成功無疑就是這么幾個狀態(tài)，我將它定義在了 status.js

module.exports = {
  RUNNING_READY: 1, // 跑步開始前
  RUNNING_DOING: 2, // 跑步進(jìn)行中
  RUNNING_PAUSE: 3, // 跑步暫停中
  RUNNING_END: 4  // 跑步結(jié)束,
  RUNNING_PREVIEW: 5 // 數(shù)據(jù)預(yù)覽
};

我們通過這幾個狀態(tài)來實(shí)現(xiàn)對界面的操作，比如開始或者暫停。這個時候我們需要添加一一些用于界面控制的按鈕。