移动互联网时代,获取用户地理位置来实现LBS当然不再话下。
在传统的PC浏览器应用领域,想获取用户的位置信息一般采用第三方的IP库,比如:淘宝IP地址库。但这种解决方案的缺陷是显而易见的:
1、只能获取大概位置,不精确;
2、不准确。尤其是使用VPN网络的时候,差别几千公里。
现在,我们结合移动互联网,为PC浏览器应用领域获取用户位置信息带来精准快捷的解决方案。利用国内较快的4G网络环境、国民应用“微信”、webSocket推送技术,可以做到良好的使用体验(平均耗时1-2秒);
技术点: webSocket 、 nodejs (生成二维码服务、socket服务)、 HTML5 gpsAPI 、第三方地图解析服务。
一、PC页面
连接到webSocket,获取socketId生成二维码(使用nodejs的生成二维码服务接口、angularJs)
var socket = io.connect('https://hking.me:3001'); socket.on('connect', function(data) { $scope.$apply(function(){ $scope.wechatLocation.qr = 'https://hking.me/qrcode?text=https://蓉.我爱你/gpsLocation.html?socketId='+socket.id; }) });
二、mobile页面
navigator.geolocation获取GPS坐标,调用高德地图API获取对应地理位置信息。
navigator.geolocation.getCurrentPosition( function (position) { var gg_lon = position.coords.longitude; var gg_lat = position.coords.latitude; var gpsLonLat = gg_lon+','+gg_lat; AMap.convertFrom(gpsLonLat,'GPS',function(status,result){ var lnglatXY=new AMap.LngLat(result.locations[0].lng,result.locations[0].lat); AMap.plugin('AMap.Geocoder', function () { var geocoder = new AMap.Geocoder({ radius: 100, extensions: "base", roadlevel: 1 }); geocoder.getAddress(lnglatXY, function (status, result) { var data = result.regeocode; $scope.$apply(function(){ $scope.positioning = false; $scope.lData.AreaGuid = data.addressComponent.adcode; $scope.lData.UseArea = data.addressComponent.province + data.addressComponent.city + data.addressComponent.district; $scope.lData.data = data; }); }); }); }); }, function(err){ location.reload(); }, {enableHighAccuracy:true} );
提交数据到webSocket服务器
var socket = io.connect('https://hking.me:3001'); $scope.save = function(){ var d = $scope.lData; var data = { socketId:socketId, AreaGuid: d.AreaGuid, UseArea: d.UseArea, data: JSON.stringify(d.data) } socket.emit('saveLocation',data); alert("保存成功!"); WeixinJSBridge.call('closeWindow'); };
三、服务端
const fs = require('fs'); const options = { key: fs.readFileSync('ssl.key'), cert: fs.readFileSync('ssl.pem') }; const app = require('https').createServer(options); const io = require('socket.io').listen(app); app.listen(3001); io.sockets.on('connection', function (socket) { socket.on('saveLocation', function (data) { io.sockets.connected[data.socketId].emit('getLocation',{AreaGuid: data.AreaGuid,UseArea: data.UseArea}); }); });
四、PC页面接收webSocket推送回来的地理位置数据
socket.on('getLocation', function (data) { console.log(data); $scope.$apply(function(){ $scope.wechatLocation.AreaGuid = data.addressComponent.adcode; $scope.wechatLocation.UseArea = data.formattedAddress; $scope.wechatLocation.AllData = $scope.syntaxHighlight(data); $scope.wechatLocation.openState = false; }) });
(完)