uniapp利用腾讯地图接口获取当前定位城市及计算两经纬度的实际距离

在这里插入图片描述

文章目录

- - - - 一、注册腾讯地图
      - 1. 申请开发者密钥（key）
        2. 开通webserviceAPI服务
        3. 下载SDK
      - 二、导入SDK
      - 2.1. 解压复制
        2.2. 页面导入
      - 三、实现
      - 3.1. 先创建实例。
        3.2. 获取经纬度
        3.3. 监控
      - 四、计算二点距离
      - 4.1. 官网地址
        4.2. 代码
        4.3. 测试

一、注册腾讯地图

1. 申请开发者密钥（key）

：申请密钥

2. 开通webserviceAPI服务

：
控制台 -> key管理 -> 设置（使用该功能的key）-> 勾选webserviceAPI-> 保存
(小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)
在这里插入图片描述

3. 下载SDK

微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.2

二、导入SDK

2.1. 解压复制

下载后解压，将里面的 qqmap-wx-jssdk.js 文件拷贝到项目里面。
在这里插入图片描述

2.2. 页面导入

然后在需要的页面导入。

import qqmapsdk from '../../static/qqmap-wx-jssdk.min.js';

在这里插入图片描述

三、实现

3.1. 先创建实例。

const QQMapWX = new qqmapsdk({key: '在腾讯位置服务申请的key'
});

3.2. 获取经纬度

然后先调用 uni.getLocation 获取经纬度，然后再调用该js的方法去解析地址。

uni.getLocation({type: 'wgs84',geocode: true,success: (res) => {console.log("获取经纬度成功");this.latitude = res.latitude;this.longitude = res.longitude;},fail: () => {console.log("获取经纬度失败");},complete: () => {// 解析地址QQMapWX.reverseGeocoder({location: {latitude: this.latitude,longitude: this.longitude},success: function(res) {console.log("解析地址成功");console.log(res);// 省let province = res.result.ad_info.province;// 市let city = res.result.ad_info.city;console.log(province);console.log(city);},fail: function(res) {uni.showToast({title: '定位失败',duration: 2000,icon: "none"})console.log(res);},complete: function(res) {console.log(res);}})}
})

3.3. 监控

控制台输出如下：
在这里插入图片描述

如果在手机上定位失败，就在 manifest.json 里的指定地方加上两行代码：

    "app-plus" : {/* 模块配置 */"distribute" : {/* 应用发布信息 */"android" : {/* android打包配置 */"permissions" : ["<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>","<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>"]}}}

获取一下手机的定位权限。

欢迎指导！！！

四、计算二点距离

uni-app获取腾讯地图计算两经纬度的实际距离（可批量）

4.1. 官网地址

https://lbs.qq.com/service/webService/webServiceGuide/webServiceDistance
在这里插入图片描述

4.2. 代码

getDistance() {uni.request({url: 'https://apis.map.qq.com/ws/distance/v1/matrix', //仅为示例，并非真实接口地址。method: 'GET',data: {mode: 'walking',from: '39.071510,117.190091',to: '39.108951,117.279396',key: '.....' //获取key},success: (res) => {console.log(res);let hw = res.data.result.rows[0].elements[0].distance; //拿到距离(米)if (hw && hw !== -1) {if (hw < 1000) {hw = hw + 'm';}//转换成公里else {hw = (hw / 2 / 500).toFixed(2) + 'km'}} else {hw = "距离太近或请刷新重试"}console.log(hw);}});
}