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)
})
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
Android百度地图实现搜索和定位及自定义图标绘制并点击时弹出泡泡
一.问题描述 上一次我们使用百度地图实现基本的定位功能,接下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡 如图所示: 二.编写MyApplication类 public class MyApplication extends Application { private static MyApplication mInstance = null; public boolean m_bKeyRight = true; pu
-
微信小程序 地图定位简单实例
微信小程序开发地图定位. 微信小程序 刚刚公布没多久,自己学习一下内容,以便以后的开发,想落后别人,这里做了一个简单的小程序示例,大家可以参考下 要求要完成的功能: 1.要完成的要点是城市定位. 2.就是切换城市. 首页我们先参照微信小程序开放的官方文档找到: 在这里我们可以找到"当前位置经纬度" getLocation: function () { var that = this wx.getLocation( { success: function (res) { console.
-
javascript+mapbar实现地图定位
本文地图使用的是图地图 图吧地图在线API地址http://union.mapbar.com/apidoc/离线CHM格式 下载地址: http://union.mapbar.com/apidoc/chm/mapbarapi.rar 效果图: Mapbar 地图 API 让您可以使用 JavaScript 将 Mapbar地图嵌入您自己的网页中.API 提供了许多方法与地图交互(正如http://www.mapbar.com/localsearch/index.html 网页上显示的),以及一系
-
ios百度地图的使用（普通定位、反地理编码）
iOS定位 - 普通定位(没有地图) - 反地理编码(得到具体位置),下面通过代码给大家详解,代码如下: #import <CoreLocation/CoreLocation.h> 使用到的头文件 要引入CoreLocation这个包 <CLLocationManagerDelegate> 使用的代理名称 //1.使用定位服务 //设置app有访问定位服务的权限 //在使用应用期间 / 始终(app在后台) //info.plist文件添加以下两条(或者其中一条): //NSLoc
-
Android百度地图定位后获取周边位置的实现代码
本文实例讲解Android百度地图定位后获取周边位置的实现代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: 1.布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical&q
-
基于Android实现百度地图定位过程详解
一.问题描述 LBS位置服务是android应用中重要的功能,应用越来越广泛,下面我们逐步学习和实现lbs相关的应用如定位.地图.导航等,首先我们看如何基于百度地图实现定位功能 二.配置环境 1.注册密钥:地址http://developer.baidu.com/map/ 2.下载定位SDK,并导入SDK如图所示: 三.编写MyApplication类 编写MyApplication类,为了使用方便我们可以将实现定位的方法封装的Application组件中 封装下列方法 1. 获取定位信息--
-
AngularJs 利用百度地图API 定位当前位置 获取地址信息
第一.申请百度密钥 很简单的几步就搞定 第二.引入文件 <!-- 百度地图定位 --> <script src="http://api.map.baidu.com/components?ak=WUfZTjKPuZ2G5RmgD0Psejv6XOmIEQVQ"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2
-
js实现百度地图定位于地址逆解析，显示自己当前的地理位置
话不多说,随小编一起看看实例代码吧 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type=&qu
-
nodejs根据ip数组在百度地图中进行定位
利用node接收到的ip数组组装url后对百度地图api发送请求并返回请求结果数组给前端 1. 前端代码部分(jquery) 重要步骤: 1> 引用百度地图 2> 实例化百度地图,添加相关缩放控件,设置主图 3> 重写http请求,设置contentType并对请求数据作转化为json对象处理 4> 发送请求数据,将请求结果转化成可处理对象 5> 根据响应结果的经纬度进行定位,添加默认覆盖物和iplabel <script type="text/javascr
-
Vue使用百度地图实现城市定位
本文实例为大家分享了Vue使用百度地图实现城市定位的具体代码,供大家参考,具体内容如下 Vue项目运行环境:Vue 2.0,Vue Cli 3.0 步骤一:登录 百度地图开放平台 在 控制台---->应用管理---->我的应用 下面创建一个应用. 目的是获取 ak 步骤二:在public文件夹的index.html文件中 导入百度地图,拼上你的ak 步骤三:在项目的根目录中创建vue.config.js文件 如果有vue.config.js文件的话,直接添加以下代码即可. vue.config
-
android使用百度地图SDK获取定位信息示例
本文使用Android Studio开发. 获取定位信息相对简单,我们只需要如下几步: 第一步,注册百度账号,在百度地图开放平台新建应用.生成API_KEY.这些就不细说了,请前往这里:http://lbsyun.baidu.com/index.php?title=android-locsdk/guide/key 第二步,下载sdk,地址:http://lbsyun.baidu.com/index.php?title=android-locsdk/geosdk-android-download
-
JavaScript接入百度地图API的方法步骤
目录 一.百度地图API接入 二.在HTML中使用百度地图API 1.在html中引入百度地图js文件 2.在网页中定义一个DIV用于显示地图 3.在网页中显示地图 4.添加可选控件 5.定位功能 6.添加地图标记 7.给地图标记添加点击事件 8.添加信息窗口 9.路径规划 10.正逆地址解析 一.百度地图API接入 1.搜索百度地图开发平台 2.注册百度账号 3.登陆并申请成为开发者 4.在百度地图开发平台的首页选择控制台,在控制台中创建应用 创建好应用以后就能在控制台我的应用中看到这个应用,
-
微信JS-SDK坐标位置如何转换为百度地图坐标
微信JS-SDK开发过程中,使用getLocation获取坐标位置,如何将微信获取的坐标直接应用到百度地图中,显示以下效果: 说明:红色图标是从微信转换过来的位置,蓝色图标是周边位置.首先从微信开发流程讲解. 1.微信JS-SDK开发文档 首先进入官网的帮助文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang=zh_CN 可对文档进行详细的研读,要获取位置信息,分以下步骤:
-
Android下如何使用百度地图sdk
可以使用该套 SDK开发适用于Android系统移动设备的地图应用,通过调用地图SDK接口,您可以轻松访问百度地图服务和数据,构建功能丰富.交互性强的LBS(地图类)应用程序. 百度地图Android SDK提供的所有服务是免费的,接口使用无次数限制.您需申请密钥(key)后,才可使用百度地图Android SDK.任何非营利性产品请直接使用.这弦外之音就是盈利的产品必须帮百度给钱. 一.百度地图api平台. 百度地图API网址:http://developer.baidu.com/map/sd
-
最全面的百度地图JavaScript离线版开发
项目要求web版百度地图要离线开发.这里总结下自己的开发过程和经验. 大概需求是:每辆车上安装有公司接收机,会实时反馈车辆的坐标.速度.转向等信息,接收到各车辆信息后在百度地图上实时画出车辆位置.作业点不一定都有网络,所以要求离线开发. 此过程主要有三个技术点: 1. 如何获取离线的API 2. 如何获取离线瓦片图 3. 如何在离线状态下将WGS坐标转换成百度地图坐标 解决问题过程: 1. 既然百度地图官方不支持离线地图,那么我们需要想办法把在线的代码改成离线的代码. 这里可以参考:http:/
-
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
相信只要是使用百度地图做实时定位服务的朋友都会遇到这个问题,在对坐标位置进行覆盖物展示的时候,会出现由于获取坐标数据时间或者两个坐标点相距过远,导致在视觉上看Marker移动就像"僵尸跳"一样,一蹦一蹦的给客户看分分钟鄙视你到不能自已.另外如果用的是有指向性图标ICON的时候,更会引来吐槽~诶诶诶,你这小车车怎么在这个立交桥转弯的时候车头向着后面呢?怎么搞得嘛你!会不会弄啊你! 所以今天参照百度大大提供的路书开源文件实现下自己的需求,记录一下以便提供参考. 一.覆盖物在获取坐标数据的同
-
Android项目实战之百度地图地点签到功能
前言:先写个简单的地点签到功能,如果日后有时间细写的话,会更加好好研究一下百度地图api,做更多逻辑判断. 这里主要是调用百度地图中的场景定位中的签到场景.通过官方文档进行api集成.通过GPS的定位功能,获取地理位置,时间,用户名进行存储.之后通过日历显示历史签到记录. 效果图: /**百度地图sdk**/ implementation files('libs/BaiduLBS_Android.jar') /**日历选择器**/ implementation 'com.prolificinte
-
通过netty把百度地图API获取的地理位置从Android端发送到Java服务器端的操作方法
本篇记录我在实现时的思考过程,写给之后可能遇到困难的我自己也给到需要帮助的人.写的比较浅显,见谅. 在写项目代码的时候,需要把Android端的位置信息传输到服务器端,通过Netty达到连续传输的效果,如下: 我们可以先来看看百度地图官方给出的相关代码 public class MainActivity extends AppCompatActivity { private MapView mMapView = null; private BaiduMap mBaiduMap = null; p