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框架Express的模板视图机制分析
Jul 19 NodeJs
NodeJS学习笔记之FS文件模块
Jan 13 NodeJs
nodejs实现获取某宝商品分类
May 28 NodeJs
Nodejs初级阶段之express
Nov 23 NodeJs
NodeJS测试框架mocha入门教程
Mar 28 NodeJs
NodeJs测试框架Mocha的安装与使用
Mar 28 NodeJs
详解nodejs爬虫程序解决gbk等中文编码问题
Apr 06 NodeJs
Nodejs异步回调之异常处理实例分析
Jun 22 NodeJs
NodeJS使用Range请求实现下载功能的方法示例
Oct 12 NodeJs
nodejs实现的http、https 请求封装操作示例
Feb 06 NodeJs
如何利用nodejs实现命令行游戏
Nov 24 NodeJs
浅谈Node的内存泄露问题
May 06 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
javascript,php获取函数参数对象的代码
2011/02/03 PHP
php操作xml
2013/10/27 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
jquery tab标签页的制作
2010/05/10 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
js时间戳格式化成日期格式的多种方法介绍
2017/02/16 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
Python中操作MySQL入门实例
2015/02/08 Python
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
python 排序算法总结及实例详解
2016/09/28 Python
Python机器学习之决策树算法
2017/12/22 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
PYTHON绘制雷达图代码实例
2019/10/15 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
Python爬虫之Selenium多窗口切换的实现
2020/12/04 Python
Python实现Kerberos用户的增删改查操作
2020/12/14 Python
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
中学教师师德承诺书
2014/05/23 职场文书
班级体育活动总结
2014/07/05 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
2015年中秋寄语
2015/07/31 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
Django与数据库交互的实现
2021/06/03 Python
Java死锁的排查
2022/05/11 Java/Android