开通腾讯位置服务

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中微信小程序权限配置中位置接口是否选中

师从慕课网,每天进步一点点,希望能有所得,也希望能给有需要的人有所帮助 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值