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

2024-02-19 22:43:00

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

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

官网教程：微信小程序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丶编写方法

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实现附近商家定位的示例代码的文章就介绍到这了,更多相关uniapp 附近商家定位内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

uniapp组件uni-popup弹出层的使用

目录一.基本用法二.自定义弹出层(dialog + message) 示例三.提交信息 (input + 延迟关闭) 四.底部分享示例官方示例:uni-popup 弹出层 - DCloud 插件市场弹出层组件用于弹出一个覆盖到页面上的内容,使用场景如:底部弹出分享弹窗.页面插屏广告等一.基本用法 <template> <view> <button type="primary" @click="toggle('top')"&g
uniapp实现日期时间选择器

本文实例为大家分享了uniapp实现日期时间选择器的具体代码,供大家参考,具体内容如下由于项目需求需要,尝试过使用Vant组件库,但是一直出现问题,插件市场的插件又不太符合需求,使用就查了相关资料,最终捣鼓的效果如下: 首先现在根目录下创建util文件夹放dateTimePicker.js dateTimePicker.js function withData(param){ return param < 10 ? '0' + param : '' + param; } function ge
uniapp实现可滑动选项卡

本文实例为大家分享了uniapp实现可滑动选项卡的具体代码,供大家参考,具体内容如下 tabControl-tag.vue <template name="tabControl"> <scroll-view scroll-x="true" :style="'background-color:'+bgc+';top:'+top+'px;'" :class="fixed?'fxied':''" :scroll-l
uniapp 仿微信的右边下拉选择弹出框的实现代码

在百度找了很多没有找到满意的这里根据自己的需求抽取一个组件这个组件主要是包括搜索框和右边菜单点击弹出一个下拉筛选菜单这里首先用一个单独的页面存放这个组件 <template> //这里是搜索框的输入框不需要的可以删掉 <view> <view class="arrivalSearch"> <view class="arrivalSmallsearch"> <view class="arriv
uniapp和vue的区别详解

目录 1.简单的页面示例 2.uni-app支持vue组件和小程序原生组件混用 3.常用标签,常用组件包括view.text.swiper.scroll-view等. 4.生命周期 4.1应用生命周期,这app.vue里面 4.2页面生命周期,可以做每个页面中写. 4.3组件生命周期, 相当于vue的生命周期. 5.使用插件总结项目目录: ┌─uniCloud 云空间目录,阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb │─components 符合vue组件规范的
使用 UniApp 实现小程序的微信登录功能

1.微信登录思路: 在main.js 中封装公共函数,用于判断用户是否登录在main.js 中分定义全局变量,用于存储接口地址如果没有登录.则跳转至登录页面进入登录页面通过 wx.login 获取用户的 code 通过 code 获取用户的 SessionKey.OpenId 等信息[本应后台接口.但是此处使用js发送请求] 通过 openId 调用后台 Api 获取用户的信息获取成功,则说明已经授权过了,直接登录成功获取失败,则说明没有授权过,需要授权之后才能进行登录用户点击页面
uniapp与webview之间的相互传值的实现

1.uni-app 如何发送数据到 H5? 其实很接单.在 web-view 中只需要通过 URL 就可以向 H5 进行传参例如在 uni-app 中: <template> <view class="advertisement" style="width: 100%;"> <web-view :src="url" @message="message"></web-view>
详解uniapp的全局变量实现方式

前言本文整理了一些uniapp全局变量的实现方式,细节知识来自于uView官网中对uniapp中的全局变量实现,感兴趣的同学可以前往uView官网搜索vuex进行查看全局变量的实现方式一般来说在uniapp中有以下几种方式本地存储配置文件挂载到 Vue.prototype globalData vuex 下面对这5种方式的实现进行介绍本地存储永久存储,以app为例即使该应用被关闭,该数据依然会被存储这是一种永久的存储方式,类似于web的Local Storage(有关于Cook
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能

最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可.设置app-plus,配置编译到App平台的特定样式.dcloud平台对app-plus做了详细说明:app-plus配置,需注意目前暂支持H5.App端,不支持小程序. 在page.json里配置app-plus即可 { "path": "
uniapp实现可以左右滑动导航栏

本文实例为大家分享了uniapp实现左右滑动导航栏的具体代码,供大家参考,具体内容如下 <template> <view> <home-view></home-view> <view class="content-box" :id="isScale?'content-box-too':''"> <view class="nav-head-box top-nav-fixed">