微信小程序实现获取准确的腾讯定位地址功能示例

本文实例讲述了微信小程序实现获取准确的腾讯定位地址功能。分享给大家供大家参考，具体如下：

官方参考文档：https://lbs.qq.com/qqmap_wx_jssdk/index.html

逆地址解析（坐标位置描述）

1. 申请开发者密钥（key）与设置

个人使用：登录，点击“key管理”，进入设置，选择“WebServiceAPI”，如果没有小程序ID，勾选“授权IP”，如果有小程序ID，勾选“域名白名单”，且勾选“微信小程序”，输入授权APPID。
https://lbs.qq.com/console/key.html
企业使用：登录企业微信公众号，选择“开发”-“开发者工具”，开通“腾讯位置服务”，进入后台管理；点击“key管理”，进入设置，勾选所需要使用的企业名下的小程序ID，选择“WebServiceAPI”，勾选“域名白名单”。

2. 下载微信小程序JavaScriptSDK

3. 添加小程序地理位置说明

2019年1月14日起新提交发布的版本若未填写地理位置用途说明，则将无法正常调用地理位置相关接口，请及时填写地理位置用途说明

相关文档：https://developers.weixin.qq.com/community/develop/doc/000ea276b44928f7e8d73d0a65b801?idescene=6

在app.json中添加以下代码

"permission": {
  "scope.userLocation": {
   "desc": "你的位置信息将用于小程序位置接口的效果展示"
  }
}

4. JS 代码

var QQMapWX = require('../../../page/common/sdk/qqmap-wx-jssdk.js');
var qqmapsdk = new QQMapWX({
 key: 'Key'
});
console.log('signin')
const _this = this;
wx.getLocation({
    type: 'gcj02',
    success: function (res) {
     qqmapsdk.reverseGeocoder({
      location: {
       latitude: res.latitude,
       longitude: res.longitude
      },
      success: function (addressRes) { //成功后的回调
       var addressRes = addressRes.result;
       console.log( addressRes.address)
        },
      fail: function (error) {
       console.error(error);
      },
      complete: function (addressRes) {
       console.log(addressRes);
      }
     })
    }
})

成功获取到的信息截图

微信开发者工具上进行测试的时候，定位不准确，需要启用“真机调试”，在手机上即可准确获取定位信息。

5. 百度地图坐标转化JS

实际应用中发现腾讯地图定位的坐标不准确，地址正确但定位坐标相差很远，后期在地图上进行展示的时候建议使用百度地图，可以准确的在地图上显示。

代码写在获取地址成功调用里面。

var addressRes = addressRes.result;
var x_pi = 3.14159265358979324 * 3000.0 / 180.0;
var x = parseFloat(addressRes.location.lng);
var y = parseFloat(addressRes.location.lat);
var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
var lng = z * Math.cos(theta) + 0.0065;
var lat = z * Math.sin(theta) + 0.006;
console.log(lng)
console.log(lat)

希望本文所述对大家微信小程序设计有所帮助。

赞 (0)

相关推荐

  • 微信小程序实现获取自己所处位置的经纬度坐标功能示例

    本文实例讲述了微信小程序实现获取自己所处位置的经纬度坐标功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml布局文件代码 <view>纬度:{{latitude}}</view> <view>经度:{{longitude}}</view> index.js逻辑文件代码 Page({ data: { latitude:'', longitude:'' }, onLoad: function () { var that=thi

  • 微信小程序开发实现的IP地址查询功能示例

    微信小程序开发实现的IP地址查询功能示例

    本文实例讲述了微信小程序开发实现的IP地址查询功能.分享给大家供大家参考,具体如下: 微信小程序 开发 参考   https://mp.weixin.qq.com/debug/wxadoc/dev/component/ search.wxml <view class="container"> <view class="page-body"> <view class="weui-search-bar {{searchFocusC

  • 微信小程序使用map组件实现检索(定位位置)周边的POI功能示例

    微信小程序使用map组件实现检索(定位位置)周边的POI功能示例

    本文实例讲述了微信小程序使用map组件实现检索(定位位置)周边的POI功能.分享给大家供大家参考,具体如下: 声明 bug: 页面顶部分类[汽车服务.汽车销售等]列表和页脚的详细地址在真机测试是会出现不显示问题? 造成原因:在小程序map组件的同一区域,map组件的视图层比普通的文本视图层要高,所以在真机会遮挡! 解决办法:将该文本视图采用cover-view,放在map中. 感谢: 感谢Lrj_estranged指出问题! 效果图 实现方法 1. 地图采用微信小程序提供的map组件: 2. 周

  • 微信小程序如何获取用户收货地址

    获取用户收货地址需要用户点击授权,所以有两种情况,确认授权.取消授权. 情况一,用户第一次访问用户地址授权,并且点击确定授权. 情况二,用户点击取消授权后,再次获取授权 流程: (代码逻辑整理) 1.点击事件触发函数,获取用户当前设置 2.根据用户当前设置中的用户授权结果,判断是否包含收货地址授权 3.如果包含收货地址授权并且没有取消过收货地址授权,直接调用wx.chooseAddress(),获取用户收货地址. 4.取消过收货地址授权,调用wx.openSetting(),调起客户端小程序设置

  • 微信小程序之获取当前位置经纬度以及地图显示详解

    微信小程序之获取当前位置经纬度以及地图显示详解

    最近刚开始接触微信小程序,在弄懂其结构以及相关接口之后,准备着手实现一个小程序,功能包括--获取用户当前位置的经纬度,在地图上查看位置,通过地图获取不同位置的经纬度. 微信小程序的主体部分包括: 新增页面需要在app.json进行配置: "pages":[ "pages/index/index", "pages/location/location", "pages/logs/logs" ] 通过在视图层调用bindtap与逻辑

  • 微信小程序在地图选择地址并返回经纬度简单示例

    微信小程序在地图选择地址并返回经纬度简单示例

    本文实例讲述了微信小程序在地图选择地址并返回经纬度功能.分享给大家供大家参考,具体如下: 微信小程序的地址管理中,经常需要获取地址的详细地址信息和地址经纬度信息 wxml文件部分代码: <button bindtap="mapView" style="margin:10px">查看地图</button> js文件主要功能代码: mapView:function(){ var that = this wx.chooseLocation({ su

  • 微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】

    微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】

    本文实例讲述了微信小程序实现点击按钮移动view标签的位置功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <view class="view" style="left:{{viewLeft}}px;">我是view标签</view> <button class="btn" type="default" bindtap="changeLocat

  • 微信小程序 获取当前地理位置和经纬度实例代码

    微信小程序 获取当前地理位置和经纬度实例代码

    微信小程序实例-获取当前的地理位置.经纬度 微信小程序官方文档 https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html JS代码 //index.js //获取应用实例 var app = getApp() Page({ data: { motto: '示例小程序-获取当前地理位.速度', userInfo: {}, hasLocation:false, location:{} }, //事件处理函数 bindViewTap: fu

  • 微信小程序用户位置权限的获取方法（拒绝后提醒）

    微信小程序获取用户当前位置有三个方式: 1. wx.getLocation(多与wx.openLocation一起用) 获取当前的精度.纬度.速度.不需要授权.当type设置为gcj02 返回可用于wx.openLocation的坐标 2. wx.chooseLocation 需要授权,打开地图选择位置 第一次调用方法时先出现 允许权限之后之后再出现 如果第一次就不允许,则一直调用wx.chooseLocation的fail方法 3. wx.openLocation 需要授权,使用微信内置地图查

  • 微信小程序实现获取准确的腾讯定位地址功能示例

    微信小程序实现获取准确的腾讯定位地址功能示例

    本文实例讲述了微信小程序实现获取准确的腾讯定位地址功能.分享给大家供大家参考,具体如下: 官方参考文档:https://lbs.qq.com/qqmap_wx_jssdk/index.html 逆地址解析(坐标位置描述) 1. 申请开发者密钥(key)与设置 个人使用:登录,点击"key管理",进入设置,选择"WebServiceAPI",如果没有小程序ID,勾选"授权IP",如果有小程序ID,勾选"域名白名单",且勾选&qu

  • 微信小程序实现判断是分享到群还是个人功能示例

    微信小程序实现判断是分享到群还是个人功能示例

    本文实例讲述了微信小程序实现判断是分享到群还是个人功能.分享给大家供大家参考,具体如下: 话不多说 直接来讲述一下操作步骤: 首先  我们需要通过调用 wx.showShareMenu 并且设置 withShareTicket 为 true.这一项必须设置,这样当用户将小程序分享到任一群聊之后,才可以获取到此次分享的 shareTicket,千万不能忘了! onLoad: function (options) { wx.showShareMenu({ // shareTicket 是获取转发目标

  • 详解微信小程序 登录获取unionid

    详解微信小程序 登录获取unionid

    详解微信小程序 登录获取unionid 首先公司开发了小程序, 公众号网页和app等, 之前都是用的openid来区分用户, 但openid只能标识用户在当前小程序或公众号里唯一, 我们希望用户可以在公司各个产品(比如公众号, 小程序, app里的微信登录)之间, 可以保持用户的唯一性, 还好微信给出了unionid. 下面分两步介绍一下 微信小程序 获取unionid的过程. 1. 首先 在微信公众平台注册小程序 , 然后在小程序上模拟登录流程. 注 : 这里只是简单登录流程, 实际中需要维护

  • 微信小程序getPhoneNumber获取用户手机号

    微信小程序getPhoneNumber获取用户手机号

     微信小程序getPhoneNumber获取用户手机号 小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等, 有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无效).将button中的open-type="getPhoneNumber",并且绑定bindgetphonenumber事件获取回调. <button open-type="getPhoneNumber"

  • 微信小程序如何获取用户信息

    最近在研究微信小程序怎么玩的.接触后发现好多的坑. 比如在浏览器中我们可以通过document.getElementById 获取到页面的DOM对象.而在微信小程序中是获取不到DOM对象的.document.getElementById() 直接报错 getElementById not function 我也是醉了.不支持这个好多有趣的功能不能实现了. 言归正传,我谈下获取用户信息的感想. 有两种获取用户信息的方案. 1.不包含敏感信息openId 的json对象(包含:nickname.av

  • 微信小程序如何获取openid及用户信息

    微信小程序获取openid及用户信息的方法 1. 获取openid 1.1 获取code 调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的会话密钥(session_key).用户数据的加解密通讯需要依赖会话密钥完成. wx.login({ //获取code success: function(res) { code = res.code //返回code } }) 1.2 获取openid 拿到上一步获取的code,结合小程序 appid

  • 微信小程序实现获取用户信息并存入数据库操作示例

    本文实例讲述了微信小程序实现获取用户信息并存入数据库操作.分享给大家供大家参考,具体如下: 微信小程序获取用户信息简单,但是在存入自己服务器数据库的过程中研究了一天多的时间,并且网上搜索不到该资源,故发出来供大家参考. index.js Page({ data: { nickName: "微信账号登录", avatarUrl:"./user-unlogin.png", }, onLoad: function () { var that = this; var nic

  • 基于python 微信小程序之获取已存在模板消息列表

    前言: 为了获取一定高级操作,如:微信模板消息(xiao,xin)推送,把消息推送给用户,或者是获取用户授权信息都需要用到access token,有效期为两个小时? 过了两个小时怎么办?重新获取,来,代码撸起走,啥女朋友没有? 获取小程序对应的access token def get_wx_token(): url = "https://api.weixin.qq.com/cgi-bin/token?" try: respone = requests.get(url, params=

  • 微信小程序如何获取用户头像和昵称

    本文介绍了微信小程序如何获取用户头像和昵称,分享给大家,具体如下: 代码user.wxml: <view > <view> <image class="avatar" src='{{userInfo.avatarUrl}}'></image> <view class="nickname">{{userInfo.nickName}}</view> </view> </view&g

随机推荐