uniapp使用vue3和ts开发小程序获取用户城市定位

这个组件的功能:可以重新定位获取到用户的具体位置,这个是通过getLocation这个api和高德地图的api获取到的,getLocation这个api需要在微信公众平台后台>开发管理> 接口管理里面申请才能使用的,不然无法使用哦,这个接口申请好像特别难,需要技巧,希望大家都能申请到吧。高德的api需要到高德的后台获取,个人开发者每天有5000限额可以使用。

也可以通过点击右边的字母快速跳转到对应的城市,可以点击热门城市或者城市列表快速定位城市。 

选择城市页面展示: 

具体代码:

<template><view class="main-Location"><!-- 字母区域 --><view class="Location-Letter"><view hover-class="Click-Latter" @tap="getLetter('ScrollTop')">*</view><view v-for="(l, i) in LatterName" :key="i" hover-class="Click-Latter" @tap="getLetter(l)":style="{ 'color': LetterId === l ? '#4662D9' : '#000' }">{{ l }}</view></view><view class="ynq-AutoLocation u_flex jcsb"><view class="ynq-AutoAddress"><text class="ynq ynq-dizhi"></text><text>当前定位:</text><text>{{ userStore.province }}</text></view><view class="ynq-ReLocation u_flex" @click="getLocationAuth"><u-icon name="reload" color="#000"></u-icon><text class="ml5">重新定位</text></view></view><scroll-view scroll-y="true" class="ynq-ScrollView" :scroll-into-view="LetterId"><!-- 热门城市 --><view class="ynq-HotCity" id="ScrollTop"><view class="ynq-HotCityTitle"><text class="ynq ynq-fire"></text><text>热门城市</text></view><view class="ynq-HotCityList flex"><text class="radius-3" @tap="setProvince(item)" v-for="(item, index) in HotCity" :key="index">{{ item }}</text></view></view><!-- 城市列表 --><view class="ynq-CityList"><block v-for="(item, index) in cityList" :key="index"><view class="ynq-CityLetter" :id="item.initial">{{ item.initial }}</view><view class="ynq-CityLine"><text @tap="setProvince(item_city.name)" v-for="(item_city, name_index) in item.list" :key="name_index">{{item_city.name }}</text></view></block></view></scroll-view></view>
</template><script setup lang="ts">
import { ref } from 'vue'
import cityList from './city'
import useUserStore from '@/store/user';// 这里我使用了pinia来进行状态管理
const userStore = useUserStore();let CityName = ref('北京')
const HotCity = ['北京', '深圳', '上海', '成都', '广州', '广东']
const LatterName = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S','T', 'U', 'V', 'W', 'X', 'Y', 'Z'
]
let LetterId = ref("")// 右侧字母跳转到对应的城市
const getLetter = (name) => {LetterId.value = nameconsole.log("点击名字", name);uni.pageScrollTo({selector: '#' + name,duration: 300})
}// 点击城市名字存储
const setProvince = (Name) => {userStore.setUser("province", Name)CityName.value = Name//跳转返回uni.navigateBack()
}// 根据API获取用户位置
const getLocationAuth = () => {// uni.chooseuni.getSystemInfo({success(res) {console.log('getSystemInfo', res);let locationEnabled = res.locationEnabled; //判断手机定位服务是否开启let locationAuthorized = res.locationAuthorized; //判断定位服务是否允许微信授权if (locationEnabled == false || locationAuthorized == false) {//手机定位服务(GPS)未授权console.log('手机定位服务');uni.showModal({title: '提示',content: '请打开定位服务功能',showCancel: false, // 不显示取消按钮success: (res) => {console.log('showModalres', res);}})} else {console.log('uni.authorize');uni.getLocation({geocode: true, // 返回城市信息success: function (loction) {console.log("getLocation", loction);uni.request({url: 'https://restapi.amap.com/v3/geocode/regeo',method: 'GET',data: {key: '高德地图的key',location: loction.longitude + ',' + loction.latitude},success: (resda: any) => {console.log("resda", resda)const { province, district } = resda.data.regeocode.addressComponentCityName.value = provinceuserStore.setUser("province", province)uni.navigateBack()}})}})}}})
}</script><style lang="scss" scoped>
.main-Location {height: 100vh;
}.ynq-AutoLocation {width: calc(100% - 40rpx);background: rgba(250, 250, 250, .5);padding: 20rpx 20rpx;text.ynq {font-size: 32rpx;margin-right: 10rpx;}text {font-size: 30rpx;}
}.ynq-HotCity {padding: 20rpx;
}.ynq-HotCityTitle {padding: 0rpx 0rpx;text.ynq {margin-right: 10rpx;color: #ff0000;font-size: 32rpx;}text {font-size: 30rpx;}
}.ynq-HotCityList {padding: 20rpx 0 0 0;flex-wrap: wrap !important;text {width: 190rpx;display: inline-block;text-align: center;background: rgba(200, 200, 200, .2);font-size: 26rpx;margin: 10rpx;padding: 20rpx 10rpx;}
}.Location-Letter {position: fixed;right: 5rpx;top: 180rpx;width: 30rpx;z-index: 100;view {display: block;width: 30rpx;text-align: center;height: 35rpx;line-height: 35rpx;font-size: 22rpx;transition: ease .3s;-webkit-transition: ease .3s;}
}.ynq-CityList {padding: 0px 40rpx 0 20rpx;.ynq-CityLetter {line-height: 30rpx;height: 40rpx;font-size: 24rpx;border-bottom: 1px solid #f7f7f7;padding-left: 10rpx;color: #909090;}.ynq-CityLine {margin: 20rpx 0px;text {display: block;line-height: 60rpx;padding: 0px 10rpx;font-size: 30rpx;color: #767676;&:nth-child(even) {background-color: rgba(200, 200, 200, .12);}}}
}.ynq-ScrollView {height: calc(100vh - 160rpx);
}.Click-Latter {font-size: 30rpx !important;
}.jcsb {justify-content: space-between;
}.u_flex {display: flex;align-items: center;
}
</style>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/178993.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大数据存储技术期中考点梳理

1.CAP理论 分布式系统的CAP理论: 首先将分布式系统中的三个特性进行如下归纳: 口(一致性(C):在分布式系统中的所有数据备份&#xff0c;在同一时刻是否有同样的值。(等于所有节点访问同一份最新的数据副本) 口可用性(A):在集群中一部分节点故障后&#xff0c;集群整体是否还能…

kafka开发环境搭建

文章目录 1 安装java环境1.1 下载linux下的安装包1.2 解压缩安装包1.3 解压后的文件移到/usr/lib目录下1.4 配置java环境变量 2 kafka的安装部署2.1 下载安装kafka2.2 配置和启动zookeeper2.3 启动和停止kafka 1 安装java环境 1.1 下载linux下的安装包 &#xff08;1&#xf…

快速了解Spring AOP的概念及使用

文章目录 1. AOP概念1.1 什么是AOP&#xff1f;1.2 什么是Spring AOP&#xff1f; 2. Spring AOP的使用2.1 引入Spring AOP依赖2.2 编写AOP程序 3. Spring AOP详解3.1 Spring AOP核心概念1. 切点&#xff08;Pointcut&#xff09;2. 连接点&#xff08;Join Point&#xff09;3…

如何运用AppLink平台中的数据连接器组件

AppLink平台组件组成 AppLink平台组件分成三个板块触发事件组件、基础组件和数据连接器 数据连接器组件里面有10个组件&#xff0c;目前也在不断新增更多的数据连接器&#xff0c;那他们在AppLink平台里的原理、触发动作以及怎么使用呢&#xff1f;接下来用MySQL和TimescaleD…

在线陪诊系统: 医疗科技的崭新前沿

在医学科技的快速发展中&#xff0c;在线陪诊系统正成为医疗服务领域的创新力量。通过结合互联网和先进的远程技术&#xff0c;这一系统为患者和医生提供了更为便捷、高效的医疗体验。本文将深入探讨在线陪诊系统的技术背后的核心代码和实现原理。 技术背后的关键代码 在线陪…

用于图像分类任务的经典神经网络综述

&#x1f380;个人主页&#xff1a; https://zhangxiaoshu.blog.csdn.net &#x1f4e2;欢迎大家&#xff1a;关注&#x1f50d;点赞&#x1f44d;评论&#x1f4dd;收藏⭐️&#xff0c;如有错误敬请指正! &#x1f495;未来很长&#xff0c;值得我们全力奔赴更美好的生活&…

探索性因子分析流程

探索性因子分析的步骤&#xff1a; 接下来&#xff0c;通过一个案例演示因子分析&#xff08;探索性因子分析&#xff09;的各个步骤应该如何进行。 案例&#xff1a;欲探究我国不同省份铁路运输能力情况&#xff0c;收集到部分相关数据如下&#xff1a; 上传数据至SPSSAU系统…

echarts 水波图

echarts 水波图 安装 npm install echarts --save npm install echarts-liquidfill --save引入 import * as echarts from echarts; import echarts-liquidfill;html <div id"chart1" ref"chart1" class"chart1"></div>css .cha…

常见面试题-Redis 切片集群以及主节点选举机制

Redis 切片集群了解吗&#xff1f; 答&#xff1a; Redis 切片集群是目前使用比较多的方案&#xff0c;Redis 切面集群支持多个主从集群进行横向扩容&#xff0c;架构如下&#xff1a; 使用切片集群有什么好处&#xff1f; 提升 Redis 读写性能&#xff0c;之前的主从模式中&…

使用C语言库函数qsort排序注意点

目录 题目背景错误C语言代码&#xff1a;正确C语言代码&#xff1a;注意点 题目背景 高校团委组织校园歌手比赛&#xff0c;进入决赛的校园歌手有10位,歌手编号从1到10进行编号。组委会随机抽取方式产生了决赛次序为&#xff1a;3,1,9,10,2,7,5,8,4,6。比赛现场有5个评委为参赛…

【Docker项目实战】使用Docker部署Plik临时文件上传系统

【Docker实战项目】使用Docker部署Plik 临时文件上传系统 一、Plik介绍1.1 Plik简介1.2 Plik特点 二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍 三、本地环境检查3.1 检查Docker服务状态3.2 检查Docker版本3.3 检查docker compose 版本 四、下载Plik镜像五、部署Plik临时…

PLC:200smart

PLC&#xff1a;200smart 第十章、数据类型、数据存储1、数据类型1.1、有符号数1.2、有符号数 2、传送指令 第十一章、比较指令、整数、浮点数的运算1、比较指令1、运算指令1.1、浮点数运算1.2、整数运算 第十章、数据类型、数据存储 1、数据类型 数据类型分为两大类 无符号数…

【小布_ORACLE】Part11-1--RMAN Backups笔记

Oracle的数据备份于恢复RMAN Backups 学习第11章需要掌握&#xff1a; 一.RMAN的备份类型 二.使用backup命令创建备份集 三.创建备份文件 四.备份归档日志文件 五.使用RMAN的copy命令创建镜像拷贝 文章目录 Oracle的数据备份于恢复RMAN Backups1.RMAN Backup Concepts&#x…

用了这7款html网页制作软件,你会爱上编程!

制作网页是一个复杂的过程&#xff0c;需要注意到各种细节&#xff0c;只有依靠出色的技术能力和强大的工具&#xff0c;我们才能真正达到我们的目标。幸运的是&#xff0c;有很多优秀的HTML网页设计软件可以让整个流程变得更加轻松和高效。以下就是我们经过深思熟虑和严格筛选…

Redis 的过期策略都有哪些?

思考:假如redis的key过期之后&#xff0c;会立即删除吗&#xff1f; Redis对数据设置数据的有效时间&#xff0c;数据过期以后&#xff0c;就需要将数据从内存中删除掉。可以按照不同的规则进行删除&#xff0c;这种删除规则就被称之为数据的删除策略&#xff08;数据过期策略…

i已学赋能智慧教育时代的幼儿教育

伴随“教育数字化战略行动”的深入开展,智慧教育正式成为国家战略。智慧教育延伸至家校社教育的每个阶段。当前,为适应智慧教育发展趋势,我国制定了《中国教育现代化2035》《教育部关于加强“三个课堂”应用的指导意见》《教育信息化2.0行动计划》等文件。幼儿作为智慧教育、智…

什么是高级语言、机器语言、汇编语言?什么是编译和解释?

1、高级语言 计算机程序是一种让计算机执行特定任务的方法。程序是由程序员用一种称为编程语言的特殊语言编写的。编程语言有很多种&#xff0c;例如 C、C、Java、Python 等。这些语言被称为高级语言&#xff0c;因为它们更接近人类的自然语言&#xff0c;而不是计算机能够直接…

python基础练习题库实验5

文章目录 题目1代码实验结果题目2代码实验结果题目3代码实验结果![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/6058fb4b66994aed838f920f7fe75706.png)题目4代码实验结果题目总结题目1 编写一个程序,使用while循环语句和字符串格式显示以下精确输出。 例如: …

Linux命令进阶——grep管道命令在查看日志的场景中的使用 具体案例

前言 本篇博客介绍在查看日志的场景中&#xff0c;grep管道命令的使用&#xff0c;并给出了具体的案例。 以下为Linux相关的博客文章列表&#xff1a; Linux——认识Linux的目录结构 & 常用命令 & vim命令 & 权限及其控制 & 防火墙命令 & 自定义命令 &a…

2023年【广东省安全员B证第四批(项目负责人)】证考试及广东省安全员B证第四批(项目负责人)复审模拟考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年广东省安全员B证第四批&#xff08;项目负责人&#xff09;证考试为正在备考广东省安全员B证第四批&#xff08;项目负责人&#xff09;操作证的学员准备的理论考试专题&#xff0c;每个月更新的广东省安全员B证…