【uniapp小程序实战】—— 使用腾讯地图获取定位_uniapp 腾讯地图(2)

最新推荐文章于 2024-05-28 16:31:01 发布

2401_84931310

最新推荐文章于 2024-05-28 16:31:01 发布

阅读量641

点赞数 5

分类专栏：程序员文章标签： go 学习面试

本文链接：https://blog.csdn.net/2401_84931310/article/details/138775678

版权

程序员专栏收录该内容

57 篇文章 0 订阅

订阅专栏

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上Go语言开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

+ 在 `微信小程序` 中，当用户离开应用后，此接口无法调用，需要申请 [后台持续定位权限]( ) ，另外新版本中需要使用 [wx.onLocationChange]( ) 监听位置信息变化；当用户点击“显示在聊天顶部”时，此接口可继续调用

补充： 以上内容为官方文档搬运过来的，详情可点击链接跳转至官网。

我们本次开发的是小程序，需要注意的是，我们本次小程序获取定位使用的是腾讯位置服务，所以需要申请腾讯位置服务的SDK。

2、腾讯位置服务平台申请密钥和下载SDK

申请步骤：详细文档
在这里插入图片描述

2.1 申请开发者秘钥

点击文档中的申请秘钥链接，跳转至腾讯位置服务平台，如下图所示申请即可。（没有账号的先注册账号）
在这里插入图片描述

2.2 开通webserviceAPI服务

开通webserviceAPI服务：控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)

1、申请Key
在这里插入图片描述
2、复制申请好的Key值等待使用

2.3 下载微信小程序JavaScriptSDK

微信小程序JavaScriptSDK下载地址（点击文字即可跳转）
在这里插入图片描述

下载好解压完成后，我们一般放在根目录下面的common目录下（如下图）

2.4 安全域名设置

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

在这里插入图片描述

到这里终于算是申请完了，在配置一下就好了。

3、配置manifest.json文件

在这里插入图片描述

 "permission" : {
	 "scope.userLocation" : {
	     "desc" : "为了您更好的体验，请确认获取您的位置"
	 }
}	
 "requiredPrivateInfos": ["getLocation", "chooseLocation"]

4、示例代码展示

4.1 引用下载好的SDK

这里我放到了common目录下：

import QQMapWX from "../../common/qqmap-wx-jssdk.js"

4.2 获取定位函数示例

methods: {
	//获取位置信息
  async getLocationInfo() {
    return new Promise((resolve) => {
      //位置信息默认数据
      let location = {
        longitude: 0,
        latitude: 0,
        province: "",
        city: "",
        area: "",
        street: "",
        address: "",
      };
      uni.getLocation({
        type: "gcj02",
        success(res) {
          location.longitude = res.longitude;
          location.latitude = res.latitude;
          // 腾讯地图Api
          const qqmapsdk = new QQMapWX({
            key: 'XXXXXXXXXXXXXXXXXXXXXXXX'  //这里填写自己申请的key
          });
          qqmapsdk.reverseGeocoder({
            location,
            success(response) {
              let info = response.result;
        	  console.log(info);
              location.province = info.address_component.province;
              location.city = info.address_component.city;
              location.area = info.address_component.district;
              location.street = info.address_component.street;
              location.address = info.address;
              resolve(location);
            },
          });
        },
        fail(err) {
			console.log(err)
          resolve(location);
        },
      });
    });
  }
 }

4.3 调用函数

函数调用可以自己去选择在页面加载的时候加载，或者有一个触发条件。（我是用的页面加载，所以放在了onload方法中）。

async onLoad() {
	const location = await this.getLocationInfo();
	this.position = location.address
},

注意：这里使用的this.position，是在data中定义的，代码示例中没有写。需要自己在data方法中定一个position变量

4.4 页面渲染

<view style="margin-top: 40rpx;margin-left: 16rpx;color:red;">
	当前定位：{{position}}
</view>

5、效果展示

在这里插入图片描述

到这里就结束啦！想要的获取用户位置信息的功能就实现啦。

🎃专栏分享：

小程序项目实战专栏：《uniapp小程序开发》
前端面试专栏地址：《面试必看》

⏳

名言警句：说能做的，做说过的

\textcolor{red} {名言警句：说能做的，做说过的}

名言警句：说能做的，做说过的

✨

原创不易，还希望各位大佬支持一下

\textcolor{blue}{原创不易，还希望各位大佬支持一下}

原创不易，还希望各位大佬支持一下

👍

点赞，你的认可是我创作的动力！

\textcolor{green}{点赞，你的认可是我创作的动力！}