nodejs根据ip数组在百度地图中进行定位


Posted in NodeJs onMarch 06, 2017

利用node接收到的ip数组组装url后对百度地图api发送请求并返回请求结果数组给前端

1. 前端代码部分(jquery)

重要步骤:

1> 引用百度地图

2> 实例化百度地图,添加相关缩放控件,设置主图

3> 重写http请求,设置contentType并对请求数据作转化为json对象处理

4> 发送请求数据,将请求结果转化成可处理对象

5> 根据响应结果的经纬度进行定位,添加默认覆盖物和iplabel

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=OxLYdFmu3YS1haMUcaBmGMBK0P7PbOqb"></script>
<body>
<div>
<input type="text" id="ipAddress"/>
</div>
<div id="allmap"></div>
</body> 
</html>
<script type="text/javascript">
var map = new BMap.Map("allmap");
// var point = new BMap.Point(116.331398,39.897445);
// map.centerAndZoom(point,12);
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件
map.enableScrollWheelZoom(); //启用滚轮放大缩小
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setMapStyle({style:'midnight'});
function http(url,method,dataObj){
var formdata = JSON.stringify(dataObj);
//异步操作
var defer = $.Deferred(); 
//发送
$.ajax({
url : url,
type : method,
data : formdata,
contentType:'application/json; charset=utf-8',
success : function(data){
defer.resolve(data);//执行状态从"未完成"改为"已完成"
},
error : function(data){
defer.reject(data);
}
});
return defer.promise();
}
//根据ip数组获取位置数组
var arr = ['112.18.17.7','112.118.17.7'];
var locationArr = [];
getLocate();
function getLocate(){ 
http('http://127.0.0.1:8081/map','post',arr).then(function(data){
for (var i = 0; i < data.length; i++) {
var temp = JSON.parse(data[i]);
var obj = {
'ip': arr[i],
'x': temp.content.point.x,
'y': temp.content.point.y,
}
locationArr.push(obj);
} 
//添加标注
addMarker();
});
}
//根据ip获取位置
// function getLocate(){ 
// http('http://127.0.0.1:8081/map','post',{'ip':'112.13.41.2'}).then(function(data){
// console.log(data);
// var obj = {
// 'ip': '115.3.4.2',
// 'x': data.content.point.x,
// 'y': data.content.point.y,
// }; 
// //添加标注
// addMarker(obj);
// });
// }
// 创建多个标注
function addMarker(){
for (var i = 0; i < locationArr.length; i ++) {
var temp = locationArr[i];
var point = new BMap.Point(temp.x, temp.y);
map.centerAndZoom(point,8);
var marker = new BMap.Marker(point);
map.addOverlay(marker);
var label = new BMap.Label(temp.ip,{offset:new BMap.Size(20,-10)});
marker.setLabel(label);
}
}
//创建一个标注
// function addMarker(temp){
// console.log(temp.x);
// var point = new BMap.Point(temp.x, temp.y);
// map.centerAndZoom(point,12);
// var marker = new BMap.Marker(point);
// map.addOverlay(marker);
// var label = new BMap.Label(temp.ip,{offset:new BMap.Size(20,-10)});
// marker.setLabel(label);
// }
</script>

2. 后端代码(nodejs)

步骤:

1> 引入http模块,express模块,body-parser模块

2> 设置允许跨域请求和请求响应的数据类型

3>设置接口请求回调函数

4>请求回调函数中,取到获取的数据并遍历,向百度api发起请求

5>获取到百度的响应数据后push进数组,并对前端请求作出响应

var http = require('http');
var express = require('express');
var app = express(); //实例化
var key = 'OxLYdFmu3YS1haMUcaBmGMBK0P7PbOqb'; //百度api的key
var bodyParser = require('body-parser');
// 创建 application/x-www-form-urlencoded 编码解析
// var urlencodedParser = bodyParser.urlencoded({ extended: false })
app.use(bodyParser.json()); //json编码
//设置跨域访问
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
//post请求,url/map
app.post('/map',function(req,res){
var ipArr = req.body;
var result = Array();
for (var i = 0; i < ipArr.length; i++) {
var tree = '';
var options = { 
hostname: 'api.map.baidu.com', 
port: 80, 
path: '/location/ip?ak=' + key + "&coor=bd09ll&ip=" + ipArr[i], 
method: 'GET' 
}; 
// 向远程服务器端发送请求
var getLocation = http.request(options, function(response){
response.on('data', function(data) {
tree += data;
result.push(tree); 
//避免缓存
tree = ''; 
}); 
}); 
getLocation.end(); 
}
//延后发送请求响应
setTimeout(function(){
res.status(200).send(result);
}, 500);
})
//监听8081接口打印请求域名和端口
var server = app.listen(8081, function () {
var host = server.address().address
var port = server.address().port
console.log("应用实例,访问地址为 http://%s:%s", host, port)
})

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

NodeJs 相关文章推荐
nodejs之请求路由概述
Jul 05 NodeJs
轻松创建nodejs服务器(10):处理上传图片
Dec 18 NodeJs
NodeJS学习笔记之Connect中间件模块(一)
Jan 27 NodeJs
nodeJs内存泄漏问题详解
Sep 05 NodeJs
手把手教你把nodejs部署到linux上跑出hello world
Jun 19 NodeJs
nodejs接入阿里大鱼短信验证码的方法
Jul 10 NodeJs
Nodejs连接mysql并实现增、删、改、查操作的方法详解
Jan 04 NodeJs
Nodejs模块载入运行原理
Feb 23 NodeJs
nodejs图片处理工具gm用法小结
Dec 12 NodeJs
M2实现Nodejs项目自动部署的方法步骤
May 05 NodeJs
NodeJS 文件夹拷贝以及删除功能
Sep 03 NodeJs
分享五个Node.js开发的优秀实践 
Apr 07 NodeJs
详解nodeJS中读写文件方法的区别
Mar 06 #NodeJs
详谈Angular路由与Nodejs路由的区别
Mar 05 #NodeJs
async/await与promise(nodejs中的异步操作问题)
Mar 03 #NodeJs
nodejs搭建本地服务器并访问文件的方法
Mar 03 #NodeJs
NodeJS仿WebApi路由示例
Feb 28 #NodeJs
Nodejs多站点切换Htpps协议详解及简单实例
Feb 23 #NodeJs
NodeJs下的测试框架Mocha的简单介绍
Feb 22 #NodeJs
You might like
Views rows style模板重写代码
2011/05/16 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
基于jquery创建的一个图片、视频缓冲的效果样式插件
2012/08/28 Javascript
Jquery跳到页面指定位置的方法
2014/05/12 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
Lentiamo荷兰:在线订购隐形眼镜、隐形眼镜液和太阳镜
2019/10/25 全球购物
国外的一些J2EE面试题一
2012/10/13 面试题
酒店司机岗位职责
2013/12/14 职场文书
公司总经理工作职责管理办法
2014/02/28 职场文书
家长对孩子的评语
2014/04/18 职场文书
村抢险救灾方案
2014/05/09 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python