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

    在上一篇博文中主要讲述了如何利用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文件代码:

 exports.getAllMarker4 = function(req,res) {
var order_id = req.body.order_id;
console.log('获取所有标记点服务器端');
console.log(req.body); 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){
if(err){
throw err;
}
var new_3 = [];
result.forEach(function (item) {
var new_1item = {
order_id:item.Order_id,
shop_id:item.shop_id,
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 };
new_3.push(new_1item);
});
console.log(new_3);
res.send({retCode:1,data:new_3});
}) };

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

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

 app.post('/getAllMarker4',position.getAllMarker4);

    controller.js

     .controller('new4Ctrl',function($scope,Position){
var map = new AMap.Map('container',{
resizeEnable: true,
zoom: 10,
center: [121.48,31.22]//定位到上海
});
AMap.plugin('AMap.ToolBar',function(){
var toolbar = new AMap.ToolBar();
map.addControl(toolbar)
})
var order_id=$scope.order_id;
//自定义搜索
$scope.mapSearch = function () {
//自定义搜索
if ($scope.order_id) {
Position.getAllMarker4({order_id: $scope.order_id}, function (data) {
var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
console.log(data.data[0]);
order_id = data.data[0].order_id;
var shop_id = data.data[0].shop_id;
var lng = data.data[0].lng;
var lat = data.data[0].lat;
var courier_id = data.data[0].courier_id;
var amount = data.data[0].amount;
var time = data.data[0].arrival_time + data.data[0].departure;
var marker = new AMap.Marker({
position: [lng, lat],
map: map
});
marker.content = 'Courier' +' '+ (courier_id) +' '+ 'In outlets' +' '+ (shop_id) +' '+ 'spend' +' '+ (time) +' '+ 'Minutes, take pieces' +' '+ (amount) +' '+'Order number:' +' '+ (data.data[0].order_id);
marker.on('click', markerClick);
marker.emit('click', {target: marker}); function markerClick(e) {
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
} map.setFitView(); });
} else {
alert("请输入正确订单号!");
}
} })

    service.js

         var getAllMarker4 = function (query,success) {
$http.post(CONFIG.host + '/getAllMarker4',query)
.success(function(data){
success(data);
});
};

    html

 <div  class="container" ng-app="PCMapInput" ng-controller="new4Ctrl">
<div class="container-fluid">
<div class="row-fluid">
<div class="span6">
<div id="container" tabindex="0" style=" width: 800px; height:500px"></div>
</div>
<div class="span6">
<div style=" width: 100px; height:50px"></div>
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="text" ng-model="order_id" placeholder="订单查询" style="width: 150px">
</label>
<button class="button button-balanced" ng-click="mapSearch()">搜索</button>
</div>
</div>
</div>
</div>
</div>

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

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

Angularjs+node+Mysql实现地图上特定点的定位以及附加信息展示的更多相关文章

  1. Angularjs+node+Mysql实现地图上的多点标注

    注:本文适合对于node有一定基础的人,如果您是小白,请先用1个小时学习node.node文档https://nodejs.org/en/docs/ 该片博文的源码地址:https://github. ...

  2. ol3对地图上某些特定的经纬度进行标注

    最终效果需要类似于这种 1.首先我们需要一个最基本的地图,这一步骤可以浏览该分类下的上一篇随笔. 2.ol3支持的文件格式有.geojson,我们需要将坐标制作成符合这种格式的样子才能被ol3识别并显 ...

  3. 基于 Angularjs&Node.js 云编辑器架构设计及开发实践

    基于 Angularjs&Node.js 云编辑器架构设计及开发实践 一.产品背景 二.总体架构 1. 前端架构 a.前端层次 b.核心基础模块设计 c.业务模块设计 2. Node.js端设 ...

  4. 如何在iOS地图上高效的显示大量数据

    2016-01-13 / 23:02:13 刚才在微信上看到这篇由cocoachina翻译小组成员翻译的文章,觉得还是挺值得参考的,因此转载至此,原文请移步:http://robots.thought ...

  5. AngularJS + Node.js + MongoDB开发

    AngularJS + Node.js + MongoDB开发的基于位置的通讯录(by vczero) 一.闲扯 有一天班长说了,同学们希望我开发一个可以共享位置的通讯录,于是自己简单设计了下功能.包 ...

  6. [ios3-地图] 如何在iOS地图上高效的显示大量数据 [转]

    [转至:http://blog.csdn.net/pjk1129/article/details/17358337] 原文:How To Efficiently Display Large Amoun ...

  7. node+mysql,实现基本的增删改查,附带跟踪记录和运行时间记录

    Node + mysql 实现基础的增删改查,以及性能测试. 网上有很多这样的例子,我也是找来学习的. 感觉node对mysql的操作非常简单,也很实用,比如自带防止sql注入的功能,一开始还担心注入 ...

  8. node与mysql的相互使用————node+mysql

    node与mysql的相互使用----node+mysql 为什么选node???因为我是个前端. 为什么选mysql???因为成熟,稳定,听说容易学. 一.mysql数据库: mysql下载和使用我 ...

  9. 记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明

    前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...

随机推荐

  1. DevExpress TreeList使用心得

    来自:http://www.cnblogs.com/sndnnlfhvk/archive/2011/05/15/2046920.html 最近做项目新增光纤线路清查功能模块,思路和算法已经想好了,些代 ...

  2. C#图片处理常见方法性能比较

    C#图片处理常见方法性能比较 来自:http://www.cnblogs.com/sndnnlfhvk/archive/2012/02/27/2370643.html   在.NET编程中,由于GDI ...

  3. SharePoint 2013 图文开发系列之计时器任务

    SharePoint的计时器任务,又称TimerJob,由服务里的Timer服务执行,在管理中心管理,是一个类似于Windows任务计划的功能,方便定时执行一些需要的功能,以免影响服务器性能. 在Sh ...

  4. Linux AVG ANTIVIRUS FREE使用介绍

    杀毒软件AVG,没有用过估计也有所耳闻.AVG ANTIVIRUS FREE - FOR LINUX 是AVG在Linux下的一款免费杀毒软件.它的官方下载地址供了rpm.deb.源码安装包等多种安装 ...

  5. Redhat Server 5.7 安装配置PHP

    PHP的简介 PHP于1994年由Rasmus Lerdorf创建,刚刚开始是Rasmus Lerdorf 为了要维护个人网页而制作的一个简单的用Perl语言编写的程序.这些工具程序用来显示 Rasm ...

  6. asp.net mvc 之旅—— 第三站 路由模板中强大的自定义IRouteConstraint约束

    我们在写mvc的时候,经常会配置各种url模板,比如controller,action,id 组合模式,其实呢,我们还可以对这三个参数进行单独的配置,采用的方式自然 就是MapRoute中的const ...

  7. angularJS操作键值对象(类似java的hashmap)填坑小结

    前言: 我们知道java的hashmap中使用最多的是put(...),get(...)以及remove()方法,那么在angularJS中如何创造(使用)这样一个对象呢 思路分析: 我们知道在jav ...

  8. ORA-01033因误删表空间文件导致的解决方案

    该类问题通常是由于表空间操作不当引起的.解决方法: SQL*Plus无法连接,显示以下错误:ORA-01033:ORACLE initialization or shutdown in progres ...

  9. percona教程:MySQL GROUP_CONCAT的使用

    percona有一篇blog: The power of MySQL GROUP_CONCAT 比较详细地介绍了GROUP_CONCAT函数的用法.简单地翻译了一下. 假设你有4名工程师,这周他们为6 ...

  10. shell 1到指定数累加

    #!/bin/bash read -p "输入尾数:" a expr $(seq -s " + " $a) #seq命令可以指定生成一个数到另一个数之间的所有整 ...