PC端網頁使用微信掃碼獲取使用者精確地理位置的一種解決方案

金華發表於2019-03-04
網頁

移動網際網路時代，獲取使用者地理位置來實現LBS當然不再話下。

在傳統的PC瀏覽器應用領域，想獲取使用者的位置資訊一般採用第三方的IP庫，比如：淘寶IP地址庫。但這種解決方案的缺陷是顯而易見的：

1、只能獲取大概位置，不精確；

2、不準確。尤其是使用VPN網路的時候，差別幾千公里。

現在，我們結合移動網際網路，為PC瀏覽器應用領域獲取使用者位置資訊帶來精準快捷的解決方案。利用國內較快的4G網路環境、國民應用“微信”、webSocket推送技術，可以做到良好的使用體驗（平均耗時1-2秒）；

PC端網頁使用微信掃碼獲取使用者精確地理位置的一種解決方案

技術點： 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/unclehking/…

demo：微信掃碼獲取地理位置（點選檢視）

相關文章