2022/8/5 uniapp实现附近商家定位

目录

一丶申请腾讯位置服务开发者密钥

二丶下载微信小程序JavaScriptSDK

三丶安全域名设置

 四丶代码编写

        4.1丶项目配置

        4.2丶定义变量

        4.3丶编写方法

        4.4丶页面加载时调用

        4.5丶数据展示

五丶真机调试效果图

---

有一个月没写博客了，最近在写项目，需要用到腾讯位置服务，获取附近商家位置。这里我就记录一下，实现过程。

一丶申请腾讯位置服务开发者密钥

        申请地址：腾讯位置服务 - 立足生态，连接未来

        官网教程：微信小程序JavaScript SDK | 腾讯位置服务

 

 点击创建应用，然后创建Key

这样我们就获得了key了 

二丶下载微信小程序JavaScriptSDK

下载链接： https://mapapi.qq.com/web/miniprogram/JSSDK/qqmap-wx-jssdk1.2.zip

三丶安全域名设置

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

 四丶代码编写

        4.1丶项目配置

在项目中创建utils目录将下载好JavaScriptSDK放入其中，并在uniapp中导入。

	import QQMapWX from '@/utils/qqmap-wx-jssdk.js'
	const qqmapsdk = new QQMapWX({
        //填写你申请的key
		key: 'XXXXX-A466V-XXXXX-XXXXX-XXXXX-XXXXX'
	})

        4.2丶定义变量

export default {
		data() {
			return {
				//商家列表
				markers:[],
				//自身经纬度
				from:{},
				//页码值
				page_index: 1,
				//每页显示多少条数据
				page_size: 10,
				//分页总条数
				total:100,
			}

		},

        4.3丶编写方法

methods: {
			/* 下面的方法是获取当前用户的地址,根据地址获取当前最近的门店 */
			getUserLocation(){
			  //获取当前地理位置
			  let that = this
			  uni.getLocation({
				type: 'wgs84',
				success(res) {
				  that.from.latitude = res.latitude
				  that.from.longitude = res.longitude
				  that.getViennaList()
				},
				fail: (err) => {
				  uni.showToast({
					title: '无法获取当前位置!',
					icon:'error',
					duration:1500
				  });
				  //默认经纬度
				  that.from.latitude = 28.326165
				  that.from.longitude = 112.935354
				  that.getViennaList()
				}
			  })
			},
			getViennaList(){
			  //获取商家位置
			  let that = this
			  qqmapsdk.search({
					//关键字改成所需商家名称
					keyword: "书亦烧仙草",
					//自身经纬度对象
					location: that.from,
					//分页(可忽略)
					page_index: that.page_index,
					page_size: that.page_size,
					success: (res) =>{
					  var mks = []
					  for (var i = 0; i < res.data.length; i++) {
						mks.push({ // 获取返回结果，放到mks数组中
						  title: res.data[i].title,
						  id: res.data[i].id,
						  latitude: res.data[i].location.lat,
						  longitude: res.data[i].location.lng,
						  address: res.data[i].address,
						  distance:''
						})
					  }
					  that.changeWidth(mks);
					},
					fail: (err) => {
					  uni.showToast({
						   title: '无法获取商店位置!',
						   icon:'error',
						   duration:1500
					  });
					}
			  })
		},
		//计算距离
		changeWidth(mks){
		  let _this = this
		  qqmapsdk.calculateDistance({
			from:_this.from,
			to: mks,
			success:(res) =>{
			  for (var i = 0; i < res.result.elements.length; i++) {
				let hw = res.result.elements[i].distance  //拿到距离(米)
				if (hw && hw >1 && hw <1000) { //拿到正确的值
				  hw = hw + '米'
				} else if(hw && hw !== -1){
				  hw = (hw / 2 / 500).toFixed(1) + '公里'
				}else{
				  hw = "距离太近或请刷新重试"
				}
				mks[i].distance = hw
			  }
			  _this.markers = [..._this.markers,...mks]
			  console.log(_this.markers);
			  //存入缓存中
			  uni.setStorageSync("markers",_this.markers)
			},
			fail: (error) =>{
			  uni.showToast({
				title: error,
				icon:'error',
				duration:1500
			  });
			},
		  });
		},
		},

        4.4丶页面加载时调用

created() {
    //判断缓存是否存在附近门店信息有的话不加载
	if(uni.getStorageSync("markers")==''){
		this.getUserLocation();
	}
}

说明：附近的门店信息已经被我们存入markers数组当中了，并且按距离从小到大排列好的！

        4.5丶数据展示

五丶真机调试效果图