標籤：
註：本文適合對於node有一定基礎的人，如果您是小白，請先用1個小時學習node。node文檔https://nodejs.org/en/docs/
該片博文的源碼地址：https://github.com/zhangxy1035/Gould
一、項目介紹
近幾年，在大資料的驅動下，資料視覺效果變的越來越重要，其中現在比較火的就是地理位置可視化，在這篇文章中，將使用node作為伺服器，angularjs作為前台顯示，mysql作為資料庫，實現地圖上的多點標註。系統架構建設簡單，可複用性高。
在這裡node的效能就不給大家贅述，項目中的地圖介面使用的是高德地圖，首先需要成為高德的開發人員具體網址為http://lbs.amap.com/，其中需要申請開發人員的key，只有將這個可以添加到自己的網頁中才能做接下來的操作，首先咱們先來看一下，最終的是如何的。
二、項目展示
由於圖中的點較多，所以選擇放在了資料庫中，當然讀者也可以不通過架設資料庫，將自己的資料放入緩衝中進行載入顯示。
按照正常習慣，我們首先來用node搭建後台，需要用到這幾個模快，使用npm 命令列載入這些模組，body-parser， express，log4js，mysql（資料庫模組）
三、項目搭建
該項目所用的編寫工具是webStorm，項目結構入：
其中node_modules中包含著npm所載入的模組，service主要是用node所寫的後台服務，web中包含的是前台的網頁html，css，js等
首先來說一下資料庫中的資料方便大家理解，在我的資料庫中new_1這張表，只有3個欄位。其中儲存的欄位是site_id,lng,lat。site_id表示的是點的資訊，lng和lat表示的是經度和緯度。
starts.js代碼如下，在該項目中，node start，該服務才會被啟動
1 var express = require(‘express‘); 2 var app = express(); 3 var path = require(‘path‘); 4 var bodyParser = require(‘body-parser‘); 5 6 var position = require(‘./position‘); 7 8 app.set(‘port‘, process.env.PORT || 9909); 9 app.use(bodyParser.urlencoded({ extended: false })) ;10 app.use(bodyParser.json());11 app.use(express.static(path.join(__dirname, ‘../web‘)));12 app.use(express.static(path.join(__dirname, ‘../app‘)));13 app.post(‘/getAllMarker‘,position.getAllMarker);14 15 app.listen(app.get(‘port‘),function(){16 console.log(‘成功開啟node,連接埠號碼:‘+app.get(‘port‘));17 });18 19 process.on(‘uncaughtException‘, function (err) {20 console.log(err);21 });View Code
接下來介紹與資料庫互動的檔案position，在該檔案中使用了mysql的包，具體操作複雜業務可參考：https://github.com/mysqljs/mysql
1 var sql = require(‘mysql‘); 2 var connection = sql.createConnection({ 3 host:‘localhost‘, 4 user:‘root‘, 5 password:‘zhang123‘, 6 database:‘test‘ 7 }); 8 connection.connect(); 9 /**10 * 擷取所有標記點11 * @param req12 * @param res13 */14 exports.getAllMarker = function(req,res) {15 console.log(‘擷取所有標記點伺服器端‘);16 console.log(req.body);17 18 var con = connection.query("select * from new_1",function(err,result,fields){19 if(err){20 throw err;21 }22 console.log("rows",result[0].site_id);23 var new_1 = [];24 result.forEach(function (item) {25 var new_1item = {26 site_id: item.site_id,27 lng: item.lng,28 lat: item.lat29 };30 new_1.push(new_1item);31 });32 console.log("rowsss",new_1);33 res.send({retCode:1,data:new_1});34 })35 36 };View Code
現在開始介紹前台，前台頁面，在這個頁面中需要輸入開發人員從高德地圖上擷取到的key值。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="chrome=1"> 6 <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> 7 <style type="text/css"> 8 body,html,#container{ 9 height: 100%;10 margin: 0px11 }12 </style>13 <title>打點</title>14 15 </head>16 <body>17 <!--<div id="container" tabindex="0" style=" width: 600px; height:400px">-->18 <div id="container" tabindex="0">19 </div>20 <div class="controllerTopDiv" ng-app="PCMapInput" ng-controller="new1Ctrl">21 </div>22 <script src="lib/angualrjs.min.js"></script>23 <script type="text/javascript" src="http://webapi.amap.com/maps?你的key"></script>24 <script type="text/javascript" src="js/webController.js"></script>25 <script type="text/javascript" src="js/webService.js"></script>26 </body>27 </html>View Code
以及前台的所需要的js檔案：controller.js
1 angular.module(‘PCMapInput‘,[‘PCFactory‘]) 2 .constant("CONFIG",{ 3 host: "http://192.168.1.103:9909",//本機測試地址(可變) 4 version:‘1.0.0‘//版本 5 }) 6 .controller(‘new1Ctrl‘,function($scope,Position) { 7 var map = new AMap.Map(‘container‘,{ 8 resizeEnable: true, 9 zoom: 10,10 center: [121.48,31.22]11 });12 AMap.plugin(‘AMap.ToolBar‘,function(){13 var toolbar = new AMap.ToolBar();14 map.addControl(toolbar)15 })16 17 18 Position.getAllMarker({},function(data){19 var infoWindow = new AMap.InfoWindow({offset:new AMap.Pixel(0,-30)});20 for(var i=0;i<data.data.length;i++ ){21 var site_id = data.data[i].site_id;22 var lng = data.data[i].lng;23 var lat = data.data[i].lat;24 var marker = new AMap.Marker({25 position: [data.data[i].lng, data.data[i].lat],26 map:map27 });28 marker.content=‘網點‘+(site_id);29 marker.on(‘click‘,markerClick);30 marker.emit(‘click‘,{target:marker});31 }32 function markerClick(e){33 infoWindow.setContent(e.target.content);34 infoWindow.open(map, e.target.getPosition());35 }36 map.setFitView();37 38 });39 40 41 42 });View Code
controller的服務;
1 angular.module(‘PCFactory‘,[]) 2 .factory(‘Position‘,function($http,CONFIG){ 3 4 5 var getAllMarker = function (query,success) { 6 $http.post(CONFIG.host + ‘/getAllMarker‘,query) 7 .success(function(data){ 8 success(data); 9 });10 };11 12 return {13 getAllMarker : getAllMarker14 };15 });View Code
項目中所需要的lib檔案亦在github上，包括angualrjs.min.js，angualrjs.min.css，bootstrap_4.0.0.css等。
四、運行項目
進入該項目中的service檔案下，使用命令列node start，項目啟動成功
然後訪問網頁，在此之前你需要ipconfig下，你的ip地址是多少，需要在controller檔案中進行修改，修改一致後，訪問網頁。為ip:9909/test.html
至此，該項目完成，在該項目中，根據高德開發api我還增加了一些滑鼠響應事件，大家快快去體驗下吧。
Angularjs+node+Mysql實現地圖上的多點標註
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
