1.注册登录:https://lbs.qq.com/
鼠标点击右上角控制台完成登录注册
完成注册之后,点击创建进入管理界面。
3.点击应用管理,我的应用,点击创建应用
4.输入要创建应用的名称、设置应用类型、点击创建
可以看到此时在我的应用界面,一个名叫“Hello World”的应用创建完成
点击添加key,完成秘钥配置,具体设置如下(我是想使用微信小程序获取位置服务,所以选择了微信小程序,根据个人需求进行选择)
点击添加,完成key的添加,key是与微信小程序的appID是绑定的
我使用的是微信小程序,所以需要下载JavaScriptSDK,具体路径为https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview,点击下载就可以了,将下载完成的 sdk解压,在小程序项目中创建lib文件夹,将js文件放入lib文件夹即可。
最后,打开微信公众平台,在“开发管理——>开发设置中”配置服务器域名,https://apis.map.qq.com,完成添加即可。
应用:把手机的gps坐标转换成真实的地址
微信小程序中已经提供了定位接口,我们只需要调用相应的方法即可,uni-app中也有相应的获取当前的地理位置、速度的方法,uni.getLocation(OBJECT),在微信小程序中,当用户离开应用后,此接口无法调用,除非申请后台持续定位权限;当用户点击“显示在聊天顶部”时,此接口可继续调用。
具体的参数设置在方法的使用中有详细的说明,在这里仅做简要解释。
通过success实现函数调用接收回复的信息。在设置坐标类型时,默认为wgs84,个人建议设置为国测局坐标gcj02,这个貌似更加准确,视个人喜好,哪个都行。
在这个学习用例中,主要获取的是latitude,longitude,address信息,可以根据官方说明以及个人需求获取自己所需要的信息。
本实例使用vue.js编写,代码实现如下
<template>
<view>
<button type="primary" class="btn" @tap="clickBtn" :disabled="canCheckin">{{btnText}}</button>
</view>
</template>
<script>
// 1.使用require引入腾讯位置服务SDK,就是在上问中lib里的js文件
var tecentMapWx = require("../../lib/qqmap-wx-jssdk.min.js");
var tecentMapSdk;
export default{
data(){
return{
btnText: '获取位置当前位置信息'
}
},
onLoad:function(){
tecentMapSdk = new tecentMapWx({
//设置为自己应用的key
key:""
})
},
methods{
clickBtn:function(){
uni.getLocation({
type:"gcj02",
success:function(resp){
// 纬度,精度数据
let latitude = resp.latitude;
let longitude = resp.longitude;
// console.log(latitude);
// console.log(longitude);
tecentMapSdk.reverseGeocoder({
location:{
latitude:latitude,
longitude:longitude
},
success:function(resp){
console.log(resp.result);
let address = resp.result.address;
let addressComponent = resp.address_component;
let nation = addressComponent.nation;
let province = addressComponent.province;
let city = addressComponent.city;
let district = addressComponent.district;
}
})
}
})
}
}
}
</script>
运行结果如下:(在微信开发者工具中启动真机调试功能,小程序运行时在微信开发者工具后台会输出相关信息)
若控制台未显示相关信息,首先检查key是否未设置,然后检查微信小程序appid是否绑定,最后检查manifest.json中微信小程序权限配置中位置接口是否选中
师从慕课网,每天进步一点点,希望能有所得,也希望能给有需要的人有所帮助