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 npm包管理的配置方法及常用命令介绍
Jun 05 NodeJs
详谈nodejs异步编程
Dec 04 NodeJs
nodejs中实现sleep功能实例
Mar 24 NodeJs
详谈Angular路由与Nodejs路由的区别
Mar 05 NodeJs
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
Jul 05 NodeJs
nodejs中安装ghost出错的原因及解决方法
Oct 23 NodeJs
nodeJs实现基于连接池连接mysql的方法示例
Feb 10 NodeJs
NodeJS实现自定义流的方法
Aug 01 NodeJs
nodejs微信开发之自动回复的实现
Mar 17 NodeJs
nodejs中实现修改用户路由功能
May 24 NodeJs
nodejs 递归拷贝、读取目录下所有文件和目录
Jul 18 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数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
PHP异常处理Exception类
2015/12/11 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
JS 文件大小判断的实现代码
2010/04/07 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
深入理解js promise chain
2016/05/05 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
jQuery中slidedown与slideup方法用法示例
2016/09/16 Javascript
深入浅出es6模板字符串
2017/08/26 Javascript
深入理解移动前端开发之viewport
2018/10/19 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
Python的净值数据接口调用示例分享
2016/03/15 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
Coltorti Boutique官网:来自意大利的设计师品牌买手店
2018/11/09 全球购物
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
服务标语大全
2014/06/18 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
债务纠纷委托书
2014/08/30 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
2014年学习部工作总结
2014/11/12 职场文书
行政主管岗位职责
2015/02/03 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
python百行代码实现汉服圈图片爬取
2021/11/23 Python