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打包工具整合到鼠标右键的方法
May 11 NodeJs
nodejs开发环境配置与使用
Nov 17 NodeJs
实例详解Nodejs 保存 payload 发送过来的文件
Jan 14 NodeJs
详解Nodejs的timers模块
Dec 22 NodeJs
nodejs的压缩文件模块archiver用法示例
Jan 18 NodeJs
简单好用的nodejs 爬虫框架分享
Mar 26 NodeJs
nodejs 终端打印进度条实例代码
Apr 22 NodeJs
在Debian(Raspberry Pi)树莓派上安装NodeJS的教程详解
Sep 19 NodeJs
nodejs中request库使用HTTPS代理的方法
Apr 30 NodeJs
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
May 30 NodeJs
NodeJS配置CORS实现过程详解
Dec 02 NodeJs
Nodejs实现微信分账的示例代码
Jan 19 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
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
PHP sprintf()函数用例解析
2011/05/18 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
2017/12/09 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
python中sets模块的用法实例
2014/09/30 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
python多线程并发实例及其优化
2019/06/27 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
python如何写出表白程序
2020/06/01 Python
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
社区禁毒工作方案
2014/06/02 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
2016年国陪研修感言
2015/11/18 职场文书
卖车协议书范文
2016/03/23 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python
VUE递归树形实现多级列表
2022/07/15 Vue.js