这里有新鲜出炉的 Node.js 教程,程序狗速度看过来!
Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台, 用来方便地搭建快速的 易于扩展的网络应用 · Node.js 借助事件驱动, 非阻塞 I/O 模型变得轻量和高效, 非常适合 运行在分布式设备 的 数据密集型 的实时应用
本文主要介绍了 nodejs 根据 ip 数组在百度地图中进行定位的方法,具有很好的参考价值。下面跟着小编一起来看下吧
利用 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)
- })
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0507/327010.html