首发于前端杂谈
PC端网页使用微信扫码获取用户精确地理位置的一种解决方案

PC端网页使用微信扫码获取用户精确地理位置的一种解决方案

移动互联网时代，获取用户地理位置来实现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;
    })
});

（完）


代码详见： gist.github.com/unclehk

demo：微信扫码获取地理位置（点击查看）

编辑于 2018-01-11 15:15
前端开发
HTML5
WebSocket

文章被以下专栏收录