最課程階段大作業05：汙水處理系統以及百度地圖

阿新 • • 發佈：2019-01-13

吃著火鍋唱著歌，我們的課程已經進行了兩個月了，現在，我們終於有能力進行真正的軟體開發了。

往期學完課程面試歸來的同學，都知道有一句話：“面試造航母，實際工作擰螺絲釘”。

很慶幸的是，到目前為止，你已經掌握了大部分擰螺絲釘需要的知識了，這些知識就是：JavaSE+HTML+CSS+JavaScript+JQuery+EasyUI+MySQL。十多年前，我們70後就是用這樣的技術開發了一個又一個專案，而現在你們90後，要比我們苦逼一點，後面還有各種框架和分散式的知識要學習。但是，不管怎麼樣，現有的知識已經滿足了我們做一個稍微正式一點、大型一點的專案了，那麼，今天我們就來做這樣一個專案：**智慧水務雲平臺。

以下的部分內容描述，我將摘自真正的專案需求書。

一：專案概述

在實際的工作中，我們無論是在售前方案書，還是需求設計書中，總能看到“專案概述”，這一般是對專案的整體描述。本專案的專案概述長成這樣：

二：平臺設計原則

在實際的設計或者需求說明書中，往往還存在著一些正確的廢話，比如“設計原則”。這些正確的廢話，少了還不行，這是非技術領導們最喜歡看的。那麼，滿足他們，寫的越好看越好：

三：體系架構

體系架構，用於描述系統的部署場景，一般適用於圖示。可複雜、可簡單。它用於指導開發人員，開發出來的軟體執行在哪裡，通訊協議用的是什麼等。以本專案為例，其體系架構描述成這樣：

四：需求設計

從這部分開始，是真正到了我們開發人員需要細看的地方了。以下不再特別框出來。

平臺功能模組分為站點監控、執行報表、警報和站點管理、個人中心及許可權認證模組，總體體系結構圖如下：

本次，我們迭代開發（一次迭代在時間上一般指一週到一個月）我們實現的功能是：站點監控、站點維護、地圖模組。

1.站點維護

2.站點監控之執行監控

3.站點監控之執行監控之迴流泵設定

4.地圖模組

五：百度地圖API

關於地圖的顯示，初學者可能會覺得非常的神祕。其實事情遠比你想象的簡單。

我們都知道，js能建立html元素，所以，我們無非做的就是呼叫百度的一個js檔案，然後輸入一些引數，百度的js就會幫我們在自己的網頁上建立地圖。

來看一個完整的例子吧：

<!doctype html>
<html>
<head>
<meta charset="u">
<title>示例</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=u5CNodaA3rFoWqcKcEhlpfDz"></script>
</head>

<body>
<div class="map">
    <div style="width:1100px;height:400px" id="map"></div>
</div>
<script type="text/javascript">
    function initMap() {
        createMap();    //初始化地圖
        addMapControl();//載入地圖控制元件，非必須
        addMapOverlay();//向地圖新增覆蓋物
    }
    
    function createMap() {
        map = new BMap.Map("map");       
        //設定地圖中心點經度、緯度、縮放比例
        map.centerAndZoom(new BMap.Point(121.491,31.233), 16);
        map.enableScrollWheelZoom();
        map.enableKeyboard();
        map.enableDragging();
        map.enableDoubleClickZoom()
    }
    function addClickHandler(target, window) {
        target.addEventListener("click", function () {
            target.openInfoWindow(window);
        });
    }
    function addMapOverlay() {
        var markers = [
          { content: "備註", title: "我在這裡", imageOffset: { width: 0, height: 3 }, position: { lat: 31.237 , lng:121.491 } }, // 緯度  經度
          { content: "備註", title: "TMD你在這裡", imageOffset: { width: 0, height: 3 }, position: { lat: 31.234 , lng:121.493 } }  // 緯度  經度
        ];
        for (var index = 0; index < markers.length; index++) {
            var point = new BMap.Point(markers[index].position.lng, markers[index].position.lat);
            var marker = new BMap.Marker(point, {
                icon: new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png", new BMap.Size(20, 25), {
                    imageOffset: new BMap.Size(markers[index].imageOffset.width, markers[index].imageOffset.height)
                })
            });
            var label = new BMap.Label(markers[index].title, { offset: new BMap.Size(25, 5) });
            var opts = {
                width: 200,
                title: markers[index].title,
                enableMessage: false
            };
            var infoWindow = new BMap.InfoWindow(markers[index].content, opts);
            marker.setLabel(label);
            addClickHandler(marker, infoWindow);
            map.addOverlay(marker);
        };
        var labels = [
        ];
        for (var index = 0; index < labels.length; index++) {
            var opt = { position: new BMap.Point(labels[index].position.lng, labels[index].position.lat) };
            var label = new BMap.Label(labels[index].content, opt);
            map.addOverlay(label);
        };
    }
    
    function addMapControl() {
        var scaleControl = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
        scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
        map.addControl(scaleControl);
        var navControl = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
        map.addControl(navControl);
        var overviewControl = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: true });
        map.addControl(overviewControl);
    }
    var map;
    initMap();
</script>

</body>
</html>

這是一個標準的示例。執行它，我們會看到：

假設我們需要做的就是將地點在地圖上顯示出來，那麼，我們唯一需要做的就是改這幾個地方：

1：你的開發者標識

這個開發者標識要去百度地圖申請，地址在這裡：http://lbsyun.baidu.com/。當然你也可以用我的。

2：設定地圖中心點：

3：設定我們要顯示的點：

然後，一切交給百度地圖就行了。

六：視訊監控

有了上面的百度地圖的知識，視訊監控還神祕嗎？道理都是一樣一樣滴。

視訊監控並不需要大家去實現，但是還是決定給大家講講原理。

如果我們要在網頁上看到視訊監控的畫面，那麼我們首先得去購買一套視訊監控的裝置。而我們在買視訊監控裝置的同時，廠商會給我們一套開發包，這個開發包中一般都會有DEMO什麼的。我們根據demo，在網頁中嵌入開發包中的一個控制元件後或嵌入一段js，設定好攝像頭的IP地址，就可以實現監控了。

樣例程式碼如下：

怎麼樣，是不是神祕感破除？這個時候，如果裝置線上，你就會在網頁中看到攝像頭中的一切哦，如下：

真是綠油油的一片草啊~~

七：作業要求

華麗分割線

===========================================================

看看吧。你想參加不一樣的培訓班，並且一畢業就NB，那就來加入我們吧；

更多技術文章和開班資訊請加入，

QQ群：

最課程階段大作業05：汙水處理系統以及百度地圖

最課程階段大作業05：汙水處理系統以及百度地圖

最課程階段大作業06：U度節能平臺控制系統

最課程階段大作業04：毫無用處的學生管理系統

最課程階段大作業03：用半天實現淘寶首頁？

最課程階段大作業02：實現自己的利息計算器

最課程階段大作業之01：使用SVN實現版本控制

必做作業三：原型化系統一款視頻編輯軟件的界面原型

必做作業3：原型化系統---1234車網原型APP設計

必做作業三：原型化系統_漫畫閱讀app

必做作業三：原型化系統-倒數日

BAT大揭祕：在騰訊、百度、阿里上班，差別竟然這麼大？

百度地圖-設定地圖最小、最大級別

百度地圖api開發：根據坐標獲得地理描述地址

百度地圖API一：根據標註點坐標範圍計算顯示縮放級別zoom自適應顯示地圖

從邂逅到共生：關於AI落地，百度與小米的新碰撞

大牛講解信號與系統以及數字信號處理

第150天：網頁中插入百度地圖方法

第151天：網頁中插入百度地圖方法（不需要密鑰）

“中國無人車第一案”出現神轉折：景馳為何“投誠”百度？

金華做網站SEO技巧：短時間內提升百度權重

最課程階段大作業05：汙水處理系統以及百度地圖

相關推薦