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实现的一个静态服务器实例
Dec 06 NodeJs
使用nodejs开发cli项目实例
Jun 03 NodeJs
nodejs修复ipa处理过的png图片
Feb 17 NodeJs
浅谈Nodejs应用主文件index.js
Aug 28 NodeJs
nodejs实现邮件发送服务实例分享
Mar 29 NodeJs
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
Jul 05 NodeJs
nodejs构建本地web测试服务器 如何解决访问静态资源问题
Jul 14 NodeJs
nodejs微信扫码支付功能实现
Feb 17 NodeJs
nodeJS模块简单用法示例
Apr 21 NodeJs
nodejs更改项目端口号的方法
May 13 NodeJs
详解nodejs http请求相关总结
Mar 31 NodeJs
Nodejs实现用户注册功能
Apr 14 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/03 日漫
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
PHP开发中常用的8个小技巧
2008/08/27 PHP
Php Image Resize图片大小调整的函数代码
2011/01/17 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
Django的数据模型访问多对多键值的方法
2015/07/21 Python
Python读取txt某几列绘图的方法
2018/10/14 Python
python实现学员管理系统
2019/02/26 Python
深入了解Python在HDA中的应用
2019/09/05 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
virtualenv介绍及简明教程
2020/06/23 Python
Restful_framework视图组件代码实例解析
2020/11/17 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
美容院营销方案
2014/03/05 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
高中运动会广播稿
2014/09/16 职场文书
古诗之感恩老师
2019/10/24 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang