前端获取用户地理定位的几种方式（Geolocation API，微信，腾讯地图） |
您所在的位置：网站首页 › 地图上怎么设置地址定位功能 › 前端获取用户地理定位的几种方式（Geolocation API，微信，腾讯地图） |
|
文章目录
前言一、 Geolocation API二、微信 SDK1.引入jssdk2. 获取签名，注入配置3. 调用JS-SDK api 获取位置
三、第三方服务（腾讯地图服务）1.引入js文件2.获取定位
总结
前言
定位一般分为两种场景：移动端和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 2. 获取签名，注入配置所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用。从后台获取配置信息，拿到appId、timestamp、nonceStr、signature，通过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('定位失败，请在微信中打开'); } }) } 三、第三方服务（腾讯地图服务） 在使用该服务前需要申请个人开发秘钥：https://lbs.qq.com/dev/console/key/manage前端定位组件：https://lbs.qq.com/webApi/component/componentGuide/componentGeolocation 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 //误差范围，以米为单位 } 总结获取用户定位在移动端业务场景上用的非常多。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |