uniapp实现附近商家定位的示例代码

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

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

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

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

uniapp实现附近商家定位的示例代码_第1张图片

uniapp实现附近商家定位的示例代码_第2张图片

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

uniapp实现附近商家定位的示例代码_第3张图片

这样我们就获得了key了 

二丶下载微信小程序JavaScriptSDK

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

uniapp实现附近商家定位的示例代码_第4张图片

三丶安全域名设置

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

uniapp实现附近商家定位的示例代码_第5张图片

 四丶代码编写

4.1丶项目配置

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

uniapp实现附近商家定位的示例代码_第6张图片

	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丶编写方法

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

4.4丶页面加载时调用

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

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

4.5丶数据展示

uniapp实现附近商家定位的示例代码_第7张图片

uniapp实现附近商家定位的示例代码_第8张图片

五丶真机调试效果图

uniapp实现附近商家定位的示例代码_第9张图片

uniapp实现附近商家定位的示例代码_第10张图片

 到此这篇关于uniapp实现附近商家定位的示例代码的文章就介绍到这了,更多相关uniapp 附近商家定位内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(uniapp实现附近商家定位的示例代码)