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 相关文章推荐
使用forever管理nodejs应用教程
Jun 03 NodeJs
Nodejs实现的一个简单udp广播服务器、客户端
Sep 25 NodeJs
轻松创建nodejs服务器(3):代码模块化
Dec 18 NodeJs
基于nodejs 的多页面爬虫实例代码
May 31 NodeJs
nodejs socket实现的服务端和客户端功能示例
Jun 02 NodeJs
浅谈NodeJs之数据库异常处理
Oct 25 NodeJs
nodejs结合socket.io实现websocket通信功能的方法
Jan 12 NodeJs
nodejs实现一个word文档解析器思路详解
Aug 14 NodeJs
nodejs实现范围请求的实现代码
Oct 12 NodeJs
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
Mar 02 NodeJs
Nodejs实现用户注册功能
Apr 14 NodeJs
linux 下以二进制的方式安装 nodejs
Feb 12 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
php图片验证码代码
2008/03/27 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
php 数组字符串搜索array_search技巧
2016/07/05 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
调试php程序的简单步骤
2019/10/04 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
js setTimeout()函数介绍及应用以倒计时为例
2013/12/12 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
会计找工作求职信范文
2013/12/09 职场文书
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
高级工程师英文求职信
2014/03/19 职场文书
警示教育活动总结
2014/05/05 职场文书
员工合理化建议书
2014/05/19 职场文书
老人节标语大全
2014/10/08 职场文书
1000字打架检讨书
2014/11/03 职场文书