当前位置： 移动技术网 > IT编程>开发语言>JavaScript > nodejs根据ip数组在百度地图中进行定位

nodejs根据ip数组在百度地图中进行定位

2019年03月22日  | 移动技术网IT编程  | 我要评论

利用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)
})

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持移动技术网！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网