微信小程序获取地理位置信息

一般导航平台都有自己的Api,这里以腾讯地图为例:

浏览器上搜索腾讯地图api或腾讯地图开放平台,顶部导航上开发文档选择微信小程序JavaScript SDK

  1. 申请开发者密钥(key):申请密钥

  2. 开通webserviceAPI服务:控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存

    (小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需要具备相应的权限)

  3. 下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.1   JavaScriptSDK v1.2

  4. 安全域名设置,在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名,添加https://apis.map.qq.com

  5. 小程序示例

将下载好的SDK(qqmap-wx-jssdk.js)引入

// 引入SDK核心类,js文件根据自己业务,位置可自行放置
var QQMapWX = require('../../common/lib/qqmap-wx-jssdk.js')

 在data内创建一个空对象qqmapsdk,和一个空字符串address(此处变量名称自定义)

调用逆地址解析接口reverseGeocoder(options:Object)

 本接口提供由坐标到坐标所在位置的文字描述的转换,输入坐标返回地理位置信息和附近poi列表。

在页面的生命周期onLoad

	onLoad() {
			// 实例化API核心类
			this.qqmapsdk = new QQMapWX({
            //替换成自己第一步生成的开发者秘钥key
				key: 'RREBZ-UVGWX-DMU4D-77AYK-2ZVY3-ZXFQP'
			});
			uni.getLocation({
				type: 'wgs84',
				success: () => {
					/* 逆地址解析 */
					this.qqmapsdk.reverseGeocoder({
						success: (res) => {
							this.address = res.result.address
							console.log(this.address);
						}
					})
				}
			});
		}

manifest.json文件内配置,源码视图->小程序特有相关

 添加的代码如下:

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

至此,运行程序,在控制台打印出所在的地区位置信息,即获取成功。

2022-10-09 出现报错,记录下

错误一:

 Error: MiniProgramError
{"errMsg":"startLocationUpdate:fail the api need to be declared in the requiredPrivateInfos field in app.json/ext.json"}

错误二:

wx.onLocationChange need to be declared in the requiredPrivateInfos field in app.json/ext.json

问题出在上文标红的api上,这里需要在上述位置上添加声明:

 /* 小程序特有相关 */
    "mp-weixin" : {
        "appid" : "wx3e0e99a1eb628b47",
        "setting" : {
            "urlCheck" : false,
            "postcss" : false,
            "minified" : false
        },
        "usingComponents" : true,
		"requiredPrivateInfos": [
		        "startLocationUpdate","onLocationChange" 
		],
        "permission" : {
            "scope.userLocation" : {
                "desc" : "你的位置信息将用于小程序获取所在位置信息"
            }
        },
        "requiredBackgroundModes" : [ "location" ]
    },

当然前提是调用了这两个api,至此,可正常获取地理位置。

详情请见:微信小程序JavaScript SDK | 腾讯位置服务腾讯地图开放平台为各类应用厂商和开发者提供基于腾讯地图的地理位置服务和解决方案;有针对Web应用的JavaScript API, 适合手机端Native APP的各种SDK, WebService接口和各类地图API等。https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值