一般导航平台都有自己的Api,这里以腾讯地图为例:
浏览器上搜索腾讯地图api或腾讯地图开放平台,顶部导航上开发文档选择微信小程序JavaScript SDK
-
申请开发者密钥(key):申请密钥
-
开通webserviceAPI服务:控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需要具备相应的权限)
-
下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2
-
安全域名设置,在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名,添加https://apis.map.qq.com
-
小程序示例
将下载好的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,至此,可正常获取地理位置。