引用百度地圖 2> 實例化百度地圖..."/>
溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

nodejs根據(jù)ip數(shù)組在百度地圖中進(jìn)行定位

發(fā)布時間：2020-10-24 07:37:12 來源：腳本之家 閱讀：240 作者：Glitter_galaxy 欄目：web開發(fā)

利用node接收到的ip數(shù)組組裝url后對百度地圖api發(fā)送請求并返回請求結(jié)果數(shù)組給前端

1. 前端代碼部分（jquery）

重要步驟：

1> 引用百度地圖

2> 實例化百度地圖，添加相關(guān)縮放控件，設(shè)置主圖

3> 重寫http請求，設(shè)置contentType并對請求數(shù)據(jù)作轉(zhuǎn)化為json對象處理

4> 發(fā)送請求數(shù)據(jù)，將請求結(jié)果轉(zhuǎn)化成可處理對象

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()); //添加地圖類型控件
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)建多個標(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)建一個標(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è)置允許跨域請求和請求響應(yīng)的數(shù)據(jù)類型

3>設(shè)置接口請求回調(diào)函數(shù)

4>請求回調(diào)函數(shù)中，取到獲取的數(shù)據(jù)并遍歷，向百度api發(fā)起請求

5>獲取到百度的響應(yīng)數(shù)據(jù)后push進(jìn)數(shù)組，并對前端請求作出響應(yīng)

var http = require('http');
var express = require('express');
var app = express(); //實例化
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è)置跨域訪問
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' 
}; 
// 向遠(yuǎn)程服務(wù)器端發(fā)送請求
var getLocation = http.request(options, function(response){
response.on('data', function(data) {
tree += data;
result.push(tree); 
//避免緩存
tree = ''; 
}); 
}); 
getLocation.end(); 
}
//延后發(fā)送請求響應(yīng)
setTimeout(function(){
res.status(200).send(result);
}, 500);
})
//監(jiān)聽8081接口打印請求域名和端口
var server = app.listen(8081, function () {
var host = server.address().address
var port = server.address().port
console.log("應(yīng)用實例，訪問地址為 http://%s:%s", host, port)
})

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持億速云！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手