一、注册腾讯地图

  1. 申请开发者密钥(key):申请密钥
  2. 开通webserviceAPI服务:控制台 -> key管理 -> 设置(使用该功能的key)-> 勾选webserviceAPI -> 保存
    (小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需要具备相应的权限)
    在这里插入图片描述
  3. 下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.2

二、导入SDK

下载后解压,将里面的 qqmap-wx-jssdk.js 文件拷贝到项目里面。
然后在需要的页面导入。

import qqmapsdk from '../../sdk/qqmap-wx-jssdk.js'
  •  

三、实现

先创建实例。

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

然后先调用 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);
			}
		})
	}
})

控制台输出如下:
控制台输出结果

如果在手机上定位失败,就在 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获取腾讯地图计算两经纬度的实际距离(可批量)

地址

https://lbs.qq.com/service/webService/webServiceGuide/webServiceDistance

image-20200822231350306

代码

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);
    }
  });
}

测试

image-20200822182949768

 

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐