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實現地圖上特定點的定位以及附加資訊展示