溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
利用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)
})
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
