移动互联网时代,获取用户地理位置来实现LBS当然不再话下。
在传统的PC浏览器应用领域,想获取用户的位置信息一般采用第三方的IP库,比如:淘宝IP地址库。但这种解决方案的缺陷是显而易见的:
1、只能获取大概位置,不精确;
2、不准确。尤其是使用V**网络的时候,差别几千公里。
现在,我们结合移动互联网,为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;
})
});
(完)
(adsbygoogle = window.adsbygoogle || []).push({});