Note: This article is suitable for node has a certain foundation of the person, if you are small white, please first 1 hours to learn node. Node Document https://nodejs.org/en/docs/
The source address of this piece of blog: https://github.com/zhangxy1035/Gould
I. Introduction of the Project
In recent years, under the drive of big data, data visualization becomes more and more important, in which the comparison of fire is the geographical location visualization, in this article, will use node as the server, Angularjs as the foreground display, MySQL as a database, to achieve multi-point on the map label. The architecture of the system is simple and reusability is high.
The performance of the node here is not to be described, the project map interface using the map, the first need to become the developer of the http://lbs.amap.com/website, which need to apply for developer key, Only this can be added to your own web page in order to do the next operation, first let's look at, the final is how.
Second, the project display
Because of the number of points in the graph, so the choice is placed in the database, of course, readers can also not set up a database, their own data into the cache to load the display.
According to normal habits, we first use node to build the background, we need to use these modules quickly, using the NPM command line to load the module, Body-parser, Express,log4js,mysql (Database module)
Iii. Construction of the project
The authoring tool used by the project is Webstorm, and the project structure is in:
The node_modules contains the modules that NPM has loaded, the service is mainly the background services written by node, the Web contains the front page HTML,CSS,JS, etc.
First of all, the data in the database is easy to understand, in my database new_1 this table, only 3 fields. The field stored in it is Site_id,lng,lat. SITE_ID represents a point of information, and LNG and lat represent longitude and latitude.
The Starts.js code is as follows, in this project, node start, the service will be started
1 varExpress = require (' Express ');2 varApp =Express ();3 varPath = require (' path ');4 varBodyparser = require (' Body-parser '));5 6 varPosition = require ('./position '));7 8App.set (' Port ', Process.env.PORT | | 9909);9App.use (bodyparser.urlencoded ({extended:false })) ;Ten App.use (Bodyparser.json ()); OneApp.use (Express.static (Path.join (__dirname, ' ... /web '))); AApp.use (Express.static (Path.join (__dirname, ' ... /app '))); -App.post ('/getallmarker ', position.getallmarker); - theApp.listen (App.get (' Port '),function(){ -Console.log (' successfully opened node, port number: ' +app.get ' (' Port '))); - }); - +Process.on (' Uncaughtexception ',function(err) { - Console.log (err); +});View Code
Next introduced the database interaction with the file position, in the file using the MySQL package, the specific operation of complex business can be consulted: Https://github.com/mysqljs/mysql
1 varsql = require (' MySQL ');2 varConnection =sql.createconnection ({3Host: ' localhost ',4User: ' Root ',5Password: ' zhang123 ',6Database: ' Test '7 });8 Connection.connect ();9 /**Ten * Get all marker points One * @param req A * @param res - */ -Exports.getallmarker =function(req,res) { theConsole.log (' Get all marker point server side '); - Console.log (req.body); - - varcon = connection.query ("SELECT * from New_1",function(err,result,fields) { + if(err) { - Throwerr; + } AConsole.log ("Rows", result[0].site_id); at varNew_1 = []; -Result.foreach (function(item) { - varNew_1item = { - site_id:item.site_id, - LNG:ITEM.LNG, - Lat:item.lat in }; - New_1.push (new_1item); to }); +Console.log ("Rowsss", new_1); -Res.send ({retcode:1, data:new_1}); the }) * $};View Code
Start by introducing the front desk, front page, where you need to enter the key value that the developer gets from the gold map.
1<!doctype html>234<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 {9height:100%;Ten margin:0px One } A</style> -<title> Dot </title> - the -<body> -<!--<div id= "container" tabindex= "0" style= "width:600px; height:400px ">--> -<div id= "container" tabindex= "0" > +</div> -<div class= "Controllertopdiv" ng-app= "Pcmapinput" ng-controller= "New1ctrl" > +</div> A<script src= "Lib/angualrjs.min.js" ></script> at<script type= "Text/javascript" src= "Http://webapi.amap.com/maps? Your key" ></script> -<script type= "Text/javascript" src= "Js/webcontroller.js" ></script> -<script type= "Text/javascript" src= "Js/webservice.js" ></script> -</body> -View CodeAnd the front desk of the required JS file: Controller.js
1Angular.module (' Pcmapinput ', [' pcfactory '])2. Constant ("CONFIG",{3Host: "http://192.168.1.103:9909",//Native test address (variable)4Version: ' 1.0.0 '//version5 })6. Controller (' New1ctrl ',function($scope, Position) {7 varMap =NewAmap.map (' Container ',{8Resizeenable:true,9Zoom:10,TenCenter: [121.48,31.22] One }); AAmap.plugin (' Amap.toolbar ',function(){ - vartoolbar =NewAmap.toolbar (); - Map.addcontrol (Toolbar) the }) - - -Position.getallmarker ({},function(data) { + varInfowindow =NewAmap.infowindow ({offset:NewAmap.pixel (0,-30)}); - for(vari=0;i<data.data.length;i++ ){ + varsite_id =data.data[i].site_id; A varLNG =data.data[i].lng; at varLat =Data.data[i].lat; - varMarker =NewAmap.marker ({ - position: [DATA.DATA[I].LNG, Data.data[i].lat], - Map:map - }); -Marker.content= ' dot ' +(site_id); inMarker.on (' click ', Markerclick); -Marker.emit (' click ', {target:marker}); to } + functionMarkerclick (e) { - infowindow.setcontent (e.target.content); the infowindow.open (Map, e.target.getposition ()); * } $ Map.setfitview ();Panax Notoginseng - }); the + A the});View CodeController's services;
1Angular.module (' Pcfactory ',[])2. Factory (' Position ',function($http, CONFIG) {3 4 5 varGetallmarker =function(query,success) {6$http. Post (config.host + '/getallmarker '), query)7. Success (function(data) {8 success (data);9 });Ten }; One A return { - Getallmarker:getallmarker - }; the});View CodeThe Lib files required in the project are also on GitHub, including Angualrjs.min.js,angualrjs.min.css,bootstrap_4.0.0.css.
Iv. running the project
Enter the service file in the project, using the command line node start, the project starts successfully
Then visit the Web page, before you need to ipconfig, your IP address is how much, you need to modify in the controller file, modify the consistent, access to the Web page. To ip:9909/test.html
At this point, the project is completed, in the project, according to the High development API I also added some mouse response events, we quickly go to experience it.
Angularjs+node+mysql implementing multipoint labeling on a map
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
