Angularjs+node+Mysql實現地圖上的多點標註

時間 2019-12-11

標籤 angularjs+node+mysql angularjs node mysql 實現地圖多點標註欄目 AngularJS 简体版

原文原文鏈接

　　注：本文適合對於node有必定基礎的人，若是您是小白，請先用1個小時學習node。node文檔https://nodejs.org/en/docs/javascript

　　該片博文的源碼地址：https://github.com/zhangxy1035/Gouldcss

　　1、項目介紹html

　　近幾年，在大數據的驅動下，數據可視化變的愈來愈重要，其中如今比較火的就是地理位置可視化，在這篇文章中，將使用node做爲服務器，angularjs做爲前臺顯示，mysql做爲數據庫，實現地圖上的多點標註。系統架構建設簡單，可複用性高。java

　　在這裏node的性能就不給你們贅述，項目中的地圖接口使用的是高德地圖，首先須要成爲高德的開發者具體網址爲http://lbs.amap.com/，其中須要申請開發者的key，只有將這個能夠添加到本身的網頁中才能作接下來的操做，首先我們先來看一下，最終的效果圖是如何的。node

　　2、項目展現mysql

　　因爲圖中的點較多，因此選擇放在了數據庫中，固然讀者也能夠不經過架設數據庫，將本身的數據放入緩存中進行加載顯示。git

　　按照正常習慣，咱們首先來用node搭建後臺，須要用到這幾個模快，使用npm 命令行加載這些模塊，body-parser， express，log4js，mysql（數據庫模塊）angularjs

　　3、項目搭建github

　　該項目所用的編寫工具是webStorm，項目結構入下圖：web

　　其中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 req
12  * @param res
13  */
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.lat
29             };
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: 0px
11         }
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:map
27                 });
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 : getAllMarker
14         };
15     });