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实现客户端js加密
Jan 09 NodeJs
nodejs 实现钉钉ISV接入的加密解密方法
Jan 16 NodeJs
windows 下安装nodejs 环境变量设置
Feb 02 NodeJs
NodeJs的fs读写删除移动监听
Apr 28 NodeJs
nodeJS实现路由功能实例代码
Jun 08 NodeJs
详解nodejs模板引擎制作
Jun 14 NodeJs
详解HTTPS 的原理和 NodeJS 的实现
Jul 04 NodeJs
nodejs 生成和导出 word的实例代码
Jul 31 NodeJs
nodejs使用socket5进行代理请求的实现
Feb 21 NodeJs
ubuntu系统下使用pm2设置nodejs开机自启动的方法
May 12 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
PHP5 安装方法
2007/01/15 PHP
php chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
php的urlencode()URL编码函数浅析
2011/08/09 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
PHP实现微信商户支付企业付款到零钱功能
2018/09/30 PHP
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
2013/07/10 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
JS中IP地址与整数相互转换的实现代码
2017/04/10 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
vuex分模块后,实现获取state的值
2020/07/26 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
放弃 Python 转向 Go语言有人给出了 9 大理由
2017/10/20 Python
Python探索之pLSA实现代码
2017/10/25 Python
Queue 实现生产者消费者模型(实例讲解)
2017/11/13 Python
快速了解Python相对导入
2018/01/12 Python
django中模板的html自动转意方法
2018/05/27 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
人事部主管岗位职责
2013/12/26 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
建议书格式
2015/02/04 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
员工辞职信范文大全
2015/05/12 职场文书
市场营销计划书
2019/04/24 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers