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)
})

이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

[iOS] 맵(MKMapView)에 핀이 표시되지 않았을 때 확인

Stack Overflow의 해시태그를 구독하니 "지도에 핀이 표시되지 않으니 도와주세요!"이런 문제를 자주 본다.대개 다음 3가지 유형의 원인이기 때문에 확인해야 할 부분을 정리해 보겠습니다. 의외로 설정을 잊어버...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

nodejs 는 ip 배열 에 따라 바 이 두 지도 에서 포 지 셔 닝 을 진행 합 니 다.

좋은 웹페이지 즐겨찾기