首页 > 代码库 > Angularjs+node+Mysql实现地图上特定点的定位以及附加信息展示

Angularjs+node+Mysql实现地图上特定点的定位以及附加信息展示

    注:本博文为博主原创,转载请注明出处。

    在上一篇博文中主要讲述了如何利用AngularJs+Node+MySql构建项目,并实现地图上的多点标注,今天在这篇文章中,我们将在上一个项目的基础上,实现特定点的定位以及附加信息的展示。这样我们的项目就更加完善了,从宏观上看到每个点,从微观上分析每个点的不同。这种方法往往在大数据可视化方面很有效果。

    Angularjs+node+Mysql实现地图上的多点标注原文地址:http://www.cnblogs.com/DonaHero/p/5815595.html(注:本文是在这篇博文的基础上进行增加功能的,还请各位能仔细搭建自己的环境,搭建环境与运行,这里将不再赘述。)

    项目源码地址:https://github.com/zhangxy1035/Gould    (项目中的源码已经更新)

    一、项目演示

    我们经常在自己的业务中,需要搜索某一点,然后让其在地图中进行显示,显示时也必须带上自己的附加信息。项目运行结果图如下:

技术分享

    当点击搜索按钮之后,结果如图

技术分享

    定位到了特定的点,并且还打印出了该点所携带的附加信息。

    二、项目搭建

    首先来说一下我们的数据集,在数据集中我们有两张表,一张表为new_3,另一张表为sample表,其中所带的字段如下:

技术分享

     new_3中的字段为前三个,sample表中的字段为后面几个。接下来我们将要实现的功能就是通过前台输入Order_id,后台进行接收,执行查询,并把返回的数据显示到前台。

     position.js文件代码:

技术分享
 1 exports.getAllMarker4 = function(req,res) { 2     var order_id = req.body.order_id; 3     console.log(‘获取所有标记点服务器端‘); 4     console.log(req.body); 5  6     var con = 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             throw err; 9         }10         var new_3 = [];11         result.forEach(function (item) {12             var new_1item = {13                 order_id:item.Order_id,14                 shop_id:item.shop_id,15                 courier_id: item.Courier_id,16                 addr: item.Addr,17                 arrival_time: item.arrival_time,18                 departure:item.departure,19                 amount:item.amount,20                 lng:item.lng,21                 lat:item.lat22 23             };24             new_3.push(new_1item);25         });26         console.log(new_3);27         res.send({retCode:1,data:new_3});28     })29 30 };
View Code

    其中需要说明的一点:order_id需要前台进行接收,所以需要这样书写:var order_id = req.body.order_id;

    start.js,由于在上一篇中我们已经将项目构建完成,现在我们只需要在start.js文件中增加这样一句代码即可:

1 app.post(‘/getAllMarker4‘,position.getAllMarker4);

    controller.js

技术分享
 1     .controller(‘new4Ctrl‘,function($scope,Position){ 2         var map = new AMap.Map(‘container‘,{ 3             resizeEnable: true, 4             zoom: 10, 5             center: [121.48,31.22]//定位到上海 6         }); 7         AMap.plugin(‘AMap.ToolBar‘,function(){ 8             var toolbar = new AMap.ToolBar(); 9             map.addControl(toolbar)10         })11         var order_id=$scope.order_id;12           //自定义搜索13         $scope.mapSearch = function () {14             //自定义搜索15             if ($scope.order_id) {16                 Position.getAllMarker4({order_id: $scope.order_id}, function (data) {17                     var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});18                     console.log(data.data[0]);19                     order_id = data.data[0].order_id;20                     var shop_id = data.data[0].shop_id;21                     var lng = data.data[0].lng;22                     var lat = data.data[0].lat;23                     var courier_id = data.data[0].courier_id;24                     var amount = data.data[0].amount;25                     var time = data.data[0].arrival_time + data.data[0].departure;26                     var marker = new AMap.Marker({27                         position: [lng, lat],28                         map: map29                     });30                     marker.content = ‘Courier‘ +‘ ‘+ (courier_id) +‘ ‘+ ‘In outlets‘ +‘ ‘+ (shop_id) +‘ ‘+ ‘spend‘ +‘ ‘+ (time)  +‘ ‘+ ‘Minutes, take pieces‘ +‘ ‘+ (amount) +‘ ‘+‘Order number:‘ +‘ ‘+ (data.data[0].order_id);31                     marker.on(‘click‘, markerClick);32                     marker.emit(‘click‘, {target: marker});33 34                     function markerClick(e) {35                         infoWindow.setContent(e.target.content);36                         infoWindow.open(map, e.target.getPosition());37                     }38 39                     map.setFitView();40 41                 });42             } else {43                 alert("请输入正确订单号!");44             }45         }46 47 48 49     })
View Code

    service.js

1         var getAllMarker4 = function (query,success) {2             $http.post(CONFIG.host + ‘/getAllMarker4‘,query)3                 .success(function(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">10                     <label class="item-input-wrapper">11                         <i class="icon ion-ios-search placeholder-icon"></i>12                         <input type="text" ng-model="order_id" placeholder="订单查询" style="width: 150px">13                     </label>14                     <button class="button button-balanced" ng-click="mapSearch()">搜索</button>15                 </div>16             </div>17         </div>18     </div>19 </div>
View Code

   在上述代码中使用了ng-model双向绑定,然后点击button进行触发,但凡前台后台数据传输,亦或者是获取数据,用这种方法都是简单易于实现的。还有不要忘记在自己的页面中加入从高德地图上获取到的开发者key值。这样一个搜索的功能就实现了。通过对于本文的学习,希望你能实现node架构前后台的交互传值,快去动手试试吧。

 

    注:本文亦包括上一篇的博文中所用到的数据集,均来自于天池大数据平台,在此博主深表谢意。

 

Angularjs+node+Mysql实现地图上特定点的定位以及附加信息展示