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中SSL服务的性能
Jul 15 NodeJs
Nodejs极简入门教程(一):模块机制
Oct 25 NodeJs
nodejs如何获取时间戳与时间差
Aug 03 NodeJs
nodejs中向HTTP响应传送进程的输出
Mar 19 NodeJs
nodejs入门教程二:创建一个简单应用示例
Apr 24 NodeJs
用Nodejs搭建服务器访问html、css、JS等静态资源文件
Apr 28 NodeJs
nodejs基于WS模块实现WebSocket聊天功能的方法
Jan 12 NodeJs
NodeJS 中Stream 的基本使用
Jul 30 NodeJs
Nodejs实现的操作MongoDB数据库功能完整示例
Feb 02 NodeJs
详解nodejs 开发企业微信第三方应用入门教程
Mar 12 NodeJs
nodejs中实现修改用户路由功能
May 24 NodeJs
独立部署小程序基于nodejs的服务器过程详解
Jun 24 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
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
php单例模式示例分享
2015/02/12 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
laravel框架数据库配置及操作数据库示例
2019/10/10 PHP
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
2013/12/24 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
以Python代码实例展示kNN算法的实际运用
2015/10/26 Javascript
基于jquery编写分页插件
2016/03/07 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
Vue组件系列开发之模态框
2019/04/18 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
python实现俄罗斯方块
2018/06/26 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
python得到单词模式的示例
2018/10/15 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
深圳-东方伟业笔试部分
2015/02/11 面试题
《白鹅》教学反思
2014/04/13 职场文书
大跃进口号
2014/06/16 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
银行实习推荐信
2015/03/27 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android