开通腾讯位置服务

最新推荐文章于 2025-08-07 11:05:20 发布

原创最新推荐文章于 2025-08-07 11:05:20 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

定位专栏收录该内容

1 篇文章

订阅专栏

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>

运行结果如下：（在微信开发者工具中启动真机调试功能，小程序运行时在微信开发者工具后台会输出相关信息）