前言

最近專案中在使用這個，我也才開始接觸這個，所有算是一個分享吧，網上V3的資料又少的可憐，我使用的是MAC，所有以mac為平臺來記錄。其他環境 我會給予連結地址，方便傳送，廢話不多說，開始幹

1.環境搭建

1.1 下載原生的demo

傳送門中其實步驟很詳細了，但是為了方便自己，也方便他人，我就簡單不一一介紹直接步驟加命令的方式

傳送門

git clone https://github.com/baidu-openmap-trace/web-demo-v3.git

1.2 安裝nodejs

brew install nodejs

1.3安裝fis3

npm install
 
 -g fis3

1.4 安裝依賴包

npm install

1.5 前期配置

準備工作：
1.service_id
2.申請2個AK

我會以AK1和AK2 欄位標識出來
AK 1作為JSAPI使用，只能放在頁面前端，會暴露給系統使用者
AK 2作為鷹眼和地址解析使用，最好能夠藏在您的服務端，防止洩露。

1.5.1 首頁配置

在根目錄中開啟manager.html檔案，24行處加入你的AK1,如下

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的AK1&callback=mapControl.initMap"
 
></script>

1.5.2 fis3編譯

根目錄下

fis3 release demo
fis3 server start

可以使用

fis3 release demo -wl

這樣程式碼更新儲存之後，FIS3會自動編譯，並重新整理瀏覽器檢視最新效果
如果需要做配置修改,使用以下這個檔案

fis-config.js

1.6成功，預覽下吧

完成上面後，一般以下地址 可以直接出來一張地圖了

http://127.0.0.1:8080/manager.html

配置上自己的引數也能看到自己的資料了

http://127.0.0.1:8080/manager
 
.html?service_id='service_id'&ak='AK2'

官方的建議是將引數隱藏在後端 所有 下面賬號配置

1.7賬號配置

根目錄下，修改以下檔案，的所在之處，

script/common/urls.js

附錄

1.文件結構

component ———————————- 依賴庫，一般不用修改
node_modules ——————————- 依賴庫，一般不用修改，需要執行npm install自動安裝
script ————————————- 核心邏輯部分

common ———————————— 全域性公共方法

commonfun.js —————————– 全域性公共方法
mapControl.js —————————- 地圖初始化和操作邏輯
urls.js ———————————- 所有鷹眼相關資料請求配置

modules ———————————– 功能模組

common ———————————– 公共模組，包括頂欄等
entitycontrol —————————- 終端管理模組
trackcontrol —————————- 軌跡監控模組

static ————————————- 樣式、圖片和第三方庫
componet.json —————————— fis3 安裝包配置檔案
fis-conf.js ——————————– fis3編譯配置檔案
manager.html ——————————- 系統入口HTML檔案
package.json ——————————- npm 配置檔案
README.md ———————————- 說明文件 專案中建議刪除
readmeImages ——————————- 說明文件中用到的圖片 專案指令建議刪除

1.修改樣式，那麼修改./static/css/common.css檔案應該就可以滿足需求了。
2.內部邏輯進行修改需要修改./script/modules/下對應的路徑

modules路徑下的三個資料夾中的結構相似。以entitycontrol為例說明，結構為

entitycontrol —————————— 終端管理模組

actions ———————————– reflux actions

entityAction.js ————————– 所有終端管理中的actions列表

stores ———————————— reflux stores

entityStores.js ————————– 終端管理中的資料請求，處理

views ————————————- reflux views

bottomcontrol.js ————————- 資料表下方控制元件
control.js ——————————- 資料表上方控制元件
entitycontrol.js ————————- 終端管理總view
entitylist.js —————————- 終端列表
page.js ———————————- 頁碼控制元件
remove.js ——————————– 刪除控制元件
search.js ——————————– 檢索控制元件
selectall.js —————————– 全選控制元件

利用Reflux將entitycontrol模組分為了三部分：views，actions，stores。

2.API介面說明

1.涉及資料檢視的基本上是GET，

2.涉及到增刪改敏感操作的基本上POST,

3.因為瀏覽器前端存在跨域的限制，不能直接用AJAX請求資料。所以DEMO對於所有的GET請求都使用了JSONP的方案進行實現。

4.終端管理中的刪除終端、編輯自定義欄位兩個功能，使用的是POST，因此沒有進行實現,開發者如果對這兩個介面有需求的話，需要自己編寫一個和DEMO同域的代理服務，轉發DEMO的POST請求到鷹眼Web API服務

5.強烈推薦:將所有的請求（包括GET）都走自己的代理伺服器，這樣就能將自己的service_id和AK 2隱藏起來了。

3.官方建議需要了解的東西

使用的一些第三方的東西