在微信内使用定位功能，如果能借助到微信app自身的定位优势，定位才能更加精准。注意：使用定位，摄像头，声音等都需要通过https协议访问网站。

1. 使用原生接口Geolocation

var options = {enableHighAccuracy: true, //true为高精度，但耗电量增加timeout: 5000, //超时时间必填，否则默认为无穷大maximumAge: 0 //位置的缓存时间，默认0即不缓存
};function success(pos) {var crd = pos.coords;console.log('Your current position is:');console.log('Latitude : ' + crd.latitude);console.log('Longitude: ' + crd.longitude);console.log('More or less ' + crd.accuracy + ' meters.');
};function error(err) {console.warn('ERROR(' + err.code + '): ' + err.message);
};navigator.geolocation.getCurrentPosition(success, error, options);

注意：这种方式只能获取wgs84的坐标，如果想在腾讯地图中显示则需要转换成火星坐标gcj02；还有一个大坑，返回的位置是`Coordinates 对象，使用JSON.stringify时返回的是空的"{}"，解决方法是JSON.stringify($.extend({},position))。`

`2.使用微信JS-SDK`获取地理位置接口

wx.getLocation({type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'success: function (res) {var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。var speed = res.speed; // 速度，以米/每秒计var accuracy = res.accuracy; // 位置精度}
});

优点是借用了微信的定位功能，定位更精准了，可以指定坐标类型了，但缺点是需要有公众号及其开发经验。

3.使用腾讯地图的前端定位组件

此组件更为强大，同样使用了微信的定位功能，但又不需要微信服务号，返回的字段更详细，还提供了IP定位，监听位置信息的改变等功能（并且微信之外也能用）。

这里需要用到开发密钥，注册地址如下：

https://lbs.qq.com?lbs_invite=RLV8FLR

先直观的来段json，展示一下有哪些字段吧：

{"module": "geolocation","type": "cache","adcode": "310101", //行政区ID，六位数字, 前两位是省，中间是市，后面两位是区"nation": "中国","province": "上海市","city": "上海市","district": "黄浦区","addr": "黄浦区延安高架路(大世界地铁站西北)","lat": 31.228474, //火星坐标(gcj02)，腾讯、Google、高德通用"lng": 121.478224,"accuracy": 600 //误差范围，以米为单位
}

是不是一下就把前面的都比下去了。下面提供一个完整示例：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>前端定位模块</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><style>* {margin: 0;padding: 0;border: 0;}body {position: absolute;width: 100%;height: 100%;text-align: center;}#pos-area {background-color: #009DDC;margin-bottom: 10px;width: 100%;overflow: scroll;text-align: left;color: white;}#demo {padding: 8px;font-size: small;}#btn-area {height: 100px;}button {margin-bottom: 10px;padding: 12px 8px;width: 42%;border-radius: 8px;background-color: #009DDC;color: white;}
</style>
<script type="text/javascript" src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
</head>
<body><div id="pos-area"><p id="demo">点击下面的按钮，获得对应信息：<br /></p></div><div id="btn-area"><button onClick="geolocation.getLocation(showPosition, showErr, options)">获取精确定位信息</button><button onClick="geolocation.getIpLocation(showPosition, showErr)">获取粗糙定位信息</button><button onClick="showWatchPosition()">开始监听位置</button><button onClick="showClearWatch()">停止监听位置</button></div><script type="text/JavaScript">var geolocation = new qq.maps.Geolocation("key必填，开发密钥", "referer必填，调用来源");document.getElementById("pos-area").style.height = (document.body.clientHeight - 110) + 'px';var positionNum = 0;var options = {timeout: 8000};//定位的超时时间，默认值为10sfunction showPosition(position) {positionNum ++;document.getElementById("demo").innerHTML += "序号：" + positionNum;document.getElementById("demo").appendChild(document.createElement('pre')).innerHTML = JSON.stringify(position, null, 4);document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;};function showErr() {positionNum ++;document.getElementById("demo").innerHTML += "序号：" + positionNum;document.getElementById("demo").appendChild(document.createElement('p')).innerHTML = "定位失败！";document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;};function showWatchPosition() {document.getElementById("demo").innerHTML += "开始监听位置！<br /><br />";geolocation.watchPosition(showPosition);document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;};function showClearWatch() {geolocation.clearWatch();document.getElementById("demo").innerHTML += "停止监听位置！<br /><br />";document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;};</script>
</body>
</html>

总结：微信里定位就选腾讯地图吧，而且也是小程序的不二选择呀。

微信内前端H5定位方式比较相关推荐

企业微信内嵌H5，引入 JS-SDK 调用 wx.previewFile 预览/下载文件（vue2.0适用）
文章目录业务场景使用步骤 1. 引入企业微信 JS-SDK 2. 配置 wx.config 3. 调用 wx.previewFile 附:官方文档业务场景基于vue2.0开发企业微信内嵌H5, ...
微信内嵌h5页面调用拍照和相册功能？
有一个问题: 在微信内嵌h5页面中通过input调用摄像头,ios既可以调用摄像头也可以选择相册,但android只能选择相册,按照网上的兼容性(就是根据capture属性的有无)做了处理后,依然不行 ...
聊聊微信内打开H5链接时如何自动跳转外部浏览器打开
很多朋友问我怎么解决微信内点击链接或扫描二维码可以直接跳出微信在外部浏览器打开网页链接,其实这并不难,只要我们实现微信跳转功能即可.下面跟大家聊聊微信内如何实现自动跳转外部浏览器打开网页功能目的生 ...
微信内置h5浏览器 getBrandWCPayRequest支付
目录 getBrandWCPayRequest支付什么是getBrandWCPayRequest支付? 如何使用getBrandWCPayRequest支付? getBrandWCPayReques ...
页面错误!请稍后再试_微信内嵌H5页面授权和分享
近期新上线项目,用到了微信授权获取用户信息和分享,掉坑无数次,遂写此篇,为后人指路项目情况技术选型项目语言:HTML.CSS.JavaScript 项目框架:Vue.js 项目搭建脚手架:vue ...
微信内置浏览器调试和调试微信内的H5页面汇总（持续更新...)
调试PC端微信内置浏览器(只支持3.2.1以下的) (1)添加以下代码, 查看chrome版本和内核安放位置 <html><script type="text/javasc ...
微信内打开H5问题错误10003
错误编号:10003 错误描述: 发布h5商城后,在微信中打开,提示 redirect_uri域名和后台配置不一样解决方案: 发现这个问题后,查了资料说是属于微信授权类问题,于是开始登陆微信公众号 ...
详述微信内推广H5和棋牌类APP如何做好域名防封处理
现在的商家越来越在意域名防封的原因在于微信对第三方推广链接管制的太严格了,导致很多商家叫苦连天.经常遇到上午分享推广出去的域名,到了下午就提示域名被封了.迫于无奈只能去换域名,然后再把新生成的推广链接 ...
微信7.0升级后高德地图在微信内置浏览器定位失败
此文为博主原创转载请注明出处尊重一下笔者的劳动成果 ⑩分感谢场景:微信7.0 苹果可以获取到定位安卓获取不到定位原因:微信升级7.0做了安全限制导致使用http的定位不能正常使用解决办法 ...

微信内前端H5定位方式比较

1. 使用原生接口Geolocation

注意：这种方式只能获取wgs84的坐标，如果想在腾讯地图中显示则需要转换成火星坐标gcj02；还有一个大坑，返回的位置是`Coordinates 对象，使用JSON.stringify时返回的是空的"{}"，解决方法是JSON.stringify($.extend({},position))。`

`2.使用微信JS-SDK`获取地理位置接口

优点是借用了微信的定位功能，定位更精准了，可以指定坐标类型了，但缺点是需要有公众号及其开发经验。

3.使用腾讯地图的前端定位组件

微信内前端H5定位方式比较相关推荐

最新文章

热门文章

微信内前端H5定位方式比较

1. 使用原生接口Geolocation

注意：这种方式只能获取wgs84的坐标，如果想在腾讯地图中显示则需要转换成火星坐标gcj02；还有一个大坑，返回的位置是Coordinates 对象，使用JSON.stringify时返回的是空的"{}"，解决方法是JSON.stringify($.extend({},position))。

2.使用微信JS-SDK获取地理位置接口

优点是借用了微信的定位功能，定位更精准了，可以指定坐标类型了，但缺点是需要有公众号及其开发经验。

3.使用腾讯地图的前端定位组件

微信内前端H5定位方式比较相关推荐

最新文章

热门文章

注意：这种方式只能获取wgs84的坐标，如果想在腾讯地图中显示则需要转换成火星坐标gcj02；还有一个大坑，返回的位置是`Coordinates 对象，使用JSON.stringify时返回的是空的"{}"，解决方法是JSON.stringify($.extend({},position))。`

`2.使用微信JS-SDK`获取地理位置接口