一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

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

时间:2017-05-30 编辑:简简单单 来源:一聚教程网

利用node接收到的ip数组组装url后对百度地图api发送请求并返回请求结果数组给前端

1. 前端代码部分(jquery)

重要步骤:

1> 引用百度地图

2> 实例化百度地图,添加相关缩放控件,设置主图

3> 重写http请求,设置contentType并对请求数据作转化为json对象处理

4> 发送请求数据,将请求结果转化成可处理对象

5> 根据响应结果的经纬度进行定位,添加默认覆盖物和iplabel

 

 代码如下 复制代码

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

vartemp=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 (vari=0; i < locationArr.length; i ++) {

vartemp=locationArr[i];

varpoint=newBMap.Point(temp.x, temp.y);

map.centerAndZoom(point,8);

varmarker=newBMap.Marker(point);

map.addOverlay(marker);

varlabel=newBMap.Label(temp.ip,{offset:new BMap.Size(20,-10)});

marker.setLabel(label);

}

}

//创建一个标注

// function addMarker(temp){

// console.log(temp.x);

// varpoint=newBMap.Point(temp.x, temp.y);

// map.centerAndZoom(point,12);

// varmarker=newBMap.Marker(point);

// map.addOverlay(marker);

// varlabel=newBMap.Label(temp.ip,{offset:new BMap.Size(20,-10)});

// marker.setLabel(label);

// }

 

2. 后端代码(nodejs)

步骤:

1> 引入http模块,express模块,body-parser模块

2> 设置允许跨域请求和请求响应的数据类型

3>设置接口请求回调函数

4>请求回调函数中,取到获取的数据并遍历,向百度api发起请求

5>获取到百度的响应数据后push进数组,并对前端请求作出响应

 

 代码如下 复制代码

varhttp = require('http');

varexpress = require('express');

varapp = express();//实例化

varkey ='OxLYdFmu3YS1haMUcaBmGMBK0P7PbOqb';//百度api的key

varbodyParser = 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){

varipArr = req.body;

varresult = Array();

for(vari = 0; i < ipArr.length; i++) {

vartree ='';

varoptions = {

hostname:'api.map.baidu.com',

port: 80,

path:'/location/ip?ak='+ key +"&coor=bd09ll&ip="+ ipArr[i],

method:'GET'

};

// 向远程服务器端发送请求

vargetLocation = 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接口打印请求域名和端口

varserver = app.listen(8081,function() {

varhost = server.address().address

varport = server.address().port

console.log("应用实例,访问地址为 http://%s:%s", host, port)

})

 

热门栏目