Angularjs+node+mysql the positioning of specific points on the map and additional information display

Note: This blog post for the original blogger, please indicate the source of reproduced.

　　　　In the previous blog post, we focused on building projects using Angularjs+node+mysql and implementing multipoint labeling on the map, and today in this article, we will implement specific point positioning and display of additional information on the basis of the previous project. So our project is more perfect, from the macroscopic view of each point, from the microscopic analysis of each point difference. This approach is often very effective in visualizing big data.

Angularjs+node+mysql implement multi-point annotation on the map original address: http://www.cnblogs.com/DonaHero/p/5815595.html (Note: This article is based on this blog to add functionality, Also please you can carefully set up their own environment, build the environment and operation, here will not repeat. ）

Project Source Address: Https://github.com/zhangxy1035/Gould (the source code in the project has been updated)

First, the project demonstration

Often in our own business, we need to search for a certain point, and then let it show up in the map, and we have to bring our own additional information when it is displayed. The project run result diagram is as follows:

When you click the Search button, the result

A specific point is located, and additional information that is carried by that point is also printed.

Ii. Construction of the project

First of all, for our dataset, we have two tables in the dataset, one for New_3, and the other for the sample table, with the following fields:

The field in the New_3 is the first three, and the fields in the sample table are the following. The next function we will implement is to enter order_id through the foreground, receive in the background, execute the query, and display the returned data to the foreground.

Position.js File Code:

1Exports.getallmarker4 =function(req,res) {2     varorder_id =req.body.order_id;3Console.log (' Get all marker point server side ');4 Console.log (req.body);5 6     varcon = connection.query ("SELECT * from New_3 n3, sample S WHERE s.addr=n3.shop_id and order_id= '" +order_id+ "'",function(err,result,fields) {7         if(err) {8             Throwerr;9         }Ten         varNew_3 = []; OneResult.foreach (function(item) { A             varNew_1item = { - Order_id:item. order_id, - shop_id:item.shop_id, the Courier_id:item. COURIER_ID, - Addr:item. ADDR, - Arrival_time:item.arrival_time, - Departure:item.departure, + Amount:item.amount, - LNG:ITEM.LNG, + Lat:item.lat A  at             }; - New_3.push (new_1item); -         }); - Console.log (new_3); -Res.send ({retcode:1, data:new_3}); -     }) in  -};

View Code

One point to note: order_id needs to be received by the foreground, so write: var order_id = req.body.order_id;

Start.js, since we've built the project in the previous article, now we just need to add this code to the Start.js file:

1 app.post ('/getallmarker4 ', position.getallmarker4);

Controller.js

1. Controller (' New4ctrl ',function($scope, Position) {2         varMap =NewAmap.map (' Container ',{3Resizeenable:true,4Zoom:10,5Center: [121.48,31.22]//location to Shanghai6         });7Amap.plugin (' Amap.toolbar ',function(){8             vartoolbar =NewAmap.toolbar ();9 Map.addcontrol (Toolbar)Ten         }) One         varOrder_id=$scope. order_id; A           //Custom Search -$scope. Mapsearch =function () { -             //Custom Search the             if($scope. order_id) { -Position.getallmarker4 ({order_id: $scope. order_id},function(data) { -                     varInfowindow =NewAmap.infowindow ({offset:NewAmap.pixel (0,-30)}); -Console.log (data.data[0]); +order_id = data.data[0].order_id; -                     varshop_id = data.data[0].shop_id; +                     varLNG = data.data[0].lng; A                     varLat = data.data[0].lat; at                     varcourier_id = data.data[0].courier_id; -                     varAmount = Data.data[0].amount; -                     varTime = Data.data[0].arrival_time + data.data[0].departure; -                     varMarker =NewAmap.marker ({ - position: [LNG, LAT], - Map:map in                     }); -marker.content = ' Courier ' + ' + (courier_id) + ' + ' in outlets ' + ' + (shop_id) + ' + ' spend ' + ' + ' + (time) + ' + ' Minute s, take pieces ' + ' + (amount) + ' + ' Order number: ' + ' + (data.data[0].order_id); toMarker.on (' click ', Markerclick); +Marker.emit (' click ', {target:marker}); -  the                     functionMarkerclick (e) { * infowindow.setcontent (e.target.content); $ infowindow.open (Map, e.target.getposition ());Panax Notoginseng                     } -  the Map.setfitview (); +  A                 }); the}Else { +Alert ("Please enter the correct order number!") "); -             } $         } $  -  -  the})

View Code

Service.js

1         var function (query,success) {2             $http. Post (config.host + '/getallmarker4 ', query)3                 . Success (data) {4                    success (data); 5                 }); 6         };

Html

1<div class= "Container" ng-app= "Pcmapinput" ng-controller= "New4ctrl" >2<div class= "Container-fluid" >3<div class= "Row-fluid" >4<div class= "Span6" >5<div id= "container" tabindex= "0" style= "width:800px; height:500px "></div>6</div>7<div class= "Span6" >8<div style= "width:100px; height:50px "></div>9<div class= "bar Bar-header item-input-inset" >Ten<label class= "Item-input-wrapper" > One<i class= "icon ion-ios-search Placeholder-icon" ></i> A<input type= "text" ng-model= "order_id" placeholder= "Order Query" style= "width:150px" > -</label> -<button class= "button button-balanced" ng-click= "Mapsearch ()" > Search </button> the</div> -</div> -</div> -</div> +</div>

View Code

In the above code using the Ng-model two-way binding, and then click on the button to trigger, any front desk data transfer, or to obtain data, with this method is simple and easy to implement. And don't forget to include the developer key value from the Gold map on your page. The functionality of such a search is implemented. Through the study of this article, I hope you can achieve the node architecture before and after the interactive transfer value, go to try it.

Note: This article also includes the data set used in the previous blog post, all from the Tianchi Big Data platform, in which the blogger is deeply grateful.

Angularjs+node+mysql the positioning of specific points on the map and additional information display