前言

定位一般分为两种场景:移动端和PC,下面分别讲下这两个场景在使用定位过程中的一些注意事项。

  • 移动端
    移动端包括手机,pad和其它带有GPS定位芯片的智能设备(如手表、音箱等),移动端的系统包括iOS和Android。成功完成定位需要达成以下前提条件:
    • 系统GPS打开
    • 所使用的App或浏览器已获取定位权限
    • 对打开的页面允许使用定位
    • 对于iOS10以上系统和Android的一些版本已禁止在非HTTPS协议的域名下定位,请尽快将站点升级到HTTPS
  • PC端
    因为pc设备上大都缺少GPS芯片,所以在PC上的定位主要通过IP精准定位服务

一、 Geolocation API

这是HTML5新推出的地理位置API,但从性能和精确度上来,都不理想。尤其PC端精确地非常低且经常获取失败。用者甚少。

二、微信 SDK

这种适用于在微信H5场景应用(比如公众号H5),只能在微信浏览器内使用微信的SDK。

1.引入jssdk

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

2. 获取签名,注入配置

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用。从后台获取配置信息,拿到appIdtimestampnonceStrsignature,通过wx.config注入配置信息

$http({
        method: 'GET',
        url: '/wechat/ticket/V3' + '?url=' + encodeURIComponent(location.href),
}).then(
        function successCallback (sign) {
                wx.config({
                    debug: false,
                    appId: sign.appId, // 必填,公众号的唯一标识
                    timestamp: sign.timestamp, // 必填,生成签名的时间戳
                    nonceStr: sign.nonceStr, // 必填,生成签名的随机串
                    signature: sign.signature, // 必填,签名,见附录1
                    jsApiList: [
                    	...,
                        'getLocation',
                        'openLocation',
                    ]
                });
        },
        function errorCallback (response) {
            console.info(response)
        }
);

3. 调用JS-SDK api 获取位置

    // 获取用户定位
    function getLocation() {
        return new Promise(function (resolve,reject) {
            if (browser.versions.weixin) {
                wx.ready(function () {
                    wx.getLocation({
                        type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
                        success: function (res) {
                            resolve({
                            	latitude: res.latitude,
                            	longitude: res.longitude,
                            	speed: res.speed, // 速度,以米/每秒计
            					accuracy: res.accuracy // 位置精度
                            });
                        },
                        cancel: function () {
                            reject('定位失败,请重新获取并允许定位');
                        },
                        fail: function () {
                            reject('定位失败,请检查您设备权限后重新尝试');
                        }
                    });
                });
                wx.error(function(err) {
      				// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
      				reject(`wxjsapi-error: ${err}`)
    			})
            } else {
                reject('定位失败,请在微信中打开');
            }
        })
    }

三、第三方服务(腾讯地图服务)

1.引入js文件

引入封装好的JS文件,通过调用js api的接口获取定位信息
js引入地址:https://apis.map.qq.com/tools/geolocation/min?key=yourkey&referer=myapp

key : 必填,开发密钥(key)

function loadMap() {
    var url = 'https://apis.map.qq.com/tools/geolocation/min?key=[your key]&referer=location&callback=initMap'; // 成功回调为initMap方法
    var jsapi = document.createElement('script');
    jsapi.charset = 'utf-8';
    jsapi.src = url;
    document.head.appendChild(jsapi);
}

2.获取定位

window.initMap = function () {
        var geolocation = new qq.maps.Geolocation([your key]);
        geolocation.getLocation(function success(position) {
            $scope.position = position;
        }, function error(result) {
            console.log('获取定位失败', JSON.stringify(result));
        }, {
                timeout: 15000, // 默认值为10s;
                failTipFlag: true
        });
}

定位成功返回结果:

{   "module":"geolocation",
    "nation": "中国",
    "province": "广东省",
    "city":"深圳市",
    "district":"南山区",
    "adcode":"440305", //行政区ID,六位数字, 前两位是省,中间是市,后面两位是区,比如深圳市ID为440300
    "addr":"深圳大学杜鹃山(白石路北250米)",
    "lat":22.530001, //火星坐标(gcj02),腾讯、Google、高德通用
    "lng":113.935364,
    "accuracy":13 //误差范围,以米为单位
}

总结

获取用户定位在移动端业务场景上用的非常多。

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐