nodejs根據(jù)ip數(shù)組在百度地圖中進(jìn)行定位
利用node接收到的ip數(shù)組組裝url后對(duì)百度地圖api發(fā)送請(qǐng)求并返回請(qǐng)求結(jié)果數(shù)組給前端
1. 前端代碼部分(jquery)
重要步驟:
1> 引用百度地圖
2> 實(shí)例化百度地圖,添加相關(guān)縮放控件,設(shè)置主圖
3> 重寫(xiě)http請(qǐng)求,設(shè)置contentType并對(duì)請(qǐng)求數(shù)據(jù)作轉(zhuǎn)化為json對(duì)象處理
4> 發(fā)送請(qǐng)求數(shù)據(jù),將請(qǐng)求結(jié)果轉(zhuǎn)化成可處理對(duì)象
5> 根據(jù)響應(yīng)結(jié)果的經(jīng)緯度進(jìn)行定位,添加默認(rèn)覆蓋物和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()); //添加地圖類(lèi)型控件 map.setMapStyle({style:'midnight'}); function http(url,method,dataObj){ var formdata = JSON.stringify(dataObj); //異步操作 var defer = $.Deferred(); //發(fā)送 $.ajax({ url : url, type : method, data : formdata, contentType:'application/json; charset=utf-8', success : function(data){ defer.resolve(data);//執(zhí)行狀態(tài)從"未完成"改為"已完成" }, error : function(data){ defer.reject(data); } }); return defer.promise(); } //根據(jù)ip數(shù)組獲取位置數(shù)組 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); } //添加標(biāo)注 addMarker(); }); } //根據(jù)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, // }; // //添加標(biāo)注 // addMarker(obj); // }); // } // 創(chuàng)建多個(gè)標(biāo)注 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); } } //創(chuàng)建一個(gè)標(biāo)注 // 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> 設(shè)置允許跨域請(qǐng)求和請(qǐng)求響應(yīng)的數(shù)據(jù)類(lèi)型
3>設(shè)置接口請(qǐng)求回調(diào)函數(shù)
4>請(qǐng)求回調(diào)函數(shù)中,取到獲取的數(shù)據(jù)并遍歷,向百度api發(fā)起請(qǐng)求
5>獲取到百度的響應(yīng)數(shù)據(jù)后push進(jìn)數(shù)組,并對(duì)前端請(qǐng)求作出響應(yīng)
var http = require('http'); var express = require('express'); var app = express(); //實(shí)例化 var key = 'OxLYdFmu3YS1haMUcaBmGMBK0P7PbOqb'; //百度api的key var bodyParser = require('body-parser'); // 創(chuàng)建 application/x-www-form-urlencoded 編碼解析 // var urlencodedParser = bodyParser.urlencoded({ extended: false }) app.use(bodyParser.json()); //json編碼 //設(shè)置跨域訪問(wèn) 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請(qǐng)求,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' }; // 向遠(yuǎn)程服務(wù)器端發(fā)送請(qǐng)求 var getLocation = http.request(options, function(response){ response.on('data', function(data) { tree += data; result.push(tree); //避免緩存 tree = ''; }); }); getLocation.end(); } //延后發(fā)送請(qǐng)求響應(yīng) setTimeout(function(){ res.status(200).send(result); }, 500); }) //監(jiān)聽(tīng)8081接口打印請(qǐng)求域名和端口 var server = app.listen(8081, function () { var host = server.address().address var port = server.address().port console.log("應(yīng)用實(shí)例,訪問(wèn)地址為 http://%s:%s", host, port) })
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
IDEA中配置運(yùn)行node.js的完整過(guò)程
為了使在終端使用npm,我們可以配置環(huán)境變量,這篇文章主要給大家介紹了關(guān)于IDEA中配置運(yùn)行node.js的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10搭建基于express框架運(yùn)行環(huán)境的方法步驟
Express提供了一個(gè)輕量級(jí)模塊,把Node.js的http模塊功能封裝在一個(gè)簡(jiǎn)單易用的接口中,這篇文章主要介紹了搭建基于express框架運(yùn)行環(huán)境的方法步驟,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11Nodejs實(shí)現(xiàn)的一個(gè)簡(jiǎn)單udp廣播服務(wù)器、客戶端
這篇文章主要介紹了Nodejs實(shí)現(xiàn)的一個(gè)簡(jiǎn)單udp廣播服務(wù)器、客戶端,本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-09-09Node.js 利用cheerio制作簡(jiǎn)單的網(wǎng)頁(yè)爬蟲(chóng)示例
本篇文章主要介紹了Node.js 利用cheerio制作簡(jiǎn)單的網(wǎng)頁(yè)爬蟲(chóng)示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03淺談Node Inspector 代理實(shí)現(xiàn)
這篇文章主要介紹了淺談Node Inspector 代理實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10