uniapp —— 配合腾讯地图实现小程序自动定位

先解释一下为什么要用腾讯地图实现自动定位

原因：uniapp可以通过uni.getLocation获取用户定位，但是获取到的定位没有中文地址，所以我们需要通过第三方SDK例如高德地图或者腾讯地图来获取中文定位信息。

零、事前准备

去腾讯地图开发者平台：《传送地址》

注册开发者开发账号，创建应用，添加模块key值（这个key值有用，相当于用户标识）：
下载腾讯地图小程序SDK：
引入代码：

一、列举实现步骤

进入小程序，判断用户本地是否存在定位数据
若无定位数据则询问用户是否授权定位信息
若用户拒绝则等待用户手动选择定位

二、先看效果

进入小程序之后，询问用户是否同意授权位置信息：

同意之后：

储存的数据（其实还有很多，只不过是取了需要的部分储存下来）：

三、上代码

这里是封装成了组件，因为在很多地方都有用到：

<template><view>// 使用 uniapp 的 picker 内置组件供用户手动选择定位// u-icon 是 uview 组件库的图标组件<picker mode="region" @change="handlePosition"><view class="search-map"><u-icon name="map" size="23" color="#fff"></u-icon><text class="search-text">{{position || '地区'}}</text></view></picker></view>
</template><script>/*** 引入腾讯地图微信小程序SDK*/import QQMapWX from '@/utils/map/qqmap-wx-jssdk.js'export default {name:"location",mounted() {// 进入小程序调用授权接口，获取用户当前定位if (!uni.getStorageSync('located')) this.getLocation()},data() {return {locationInfo: {}, // 用于存储获取得到的数据position: uni.getStorageSync('location').district // 这里想要渲染省还是市还是区的数据都可以，看你业务需求};},methods: {/*** 向父组件传递数据* */toParent() {this.$emit('watchPosition', {data: this.locationInfo})},/*** 用户手动选择定位* @e picker获取得到的参数* */handlePosition(e) {this.position = e.detail.value[2]this.locationInfo.province = e.detail.value[0]this.locationInfo.city = e.detail.value[1]this.locationInfo.district = e.detail.value[2]this.mapBack(e.detail.value[0], e.detail.value[1])this.toParent()},/*** 获取用户当前定位*/getLocation() {let that = this// 向用户发起授权请求，弹框提示uni.authorize({// 获取用户定位信息scope: "scope.userLocation",// 用户同意授权执行success() {// 引入腾讯地图API，实例化核心类let qqMapSdk = new QQMapWX({// 填入你上面申请的应用key值key: '你的key值'})// 获取位置信息uni.getLocation({type: 'wgs84',success(result) {// 逆地址解析方法qqMapSdk.reverseGeocoder({location: {latitude: result.latitude,longitude: result.longitude},success(res) {that.position = res.result.ad_info.districtthat.locationInfo.province = res.result.ad_info.provincethat.locationInfo.city = res.result.ad_info.citythat.locationInfo.district = res.result.ad_info.districtthat.mapBack(res.result.ad_info.province, res.result.ad_info.city)},fail(err) {console.log('逆地址解析失败');}})}})},fail(err) {uni.showToast({icon: 'none',title: '注意：需要授权获取定位，否则部分功能将无法使用',duration: 2000})}})},/*** 转换为后端的定位编码* @province 需要转换编码的省份* @city 需要转换编码的城市* */mapBack(province, city) {let that = thisconst localLocation = JSON.parse(uni.getStorageSync('address'))localLocation.map(item => {if (item.name == province.substr(0, province.length - 1)) {that.locationInfo.province_code = ''that.locationInfo.city_code = item.id} else {item.address.map(items => {if (items.name == city.substr(0, city.length - 1)) {that.locationInfo.province_code = item.idthat.locationInfo.city_code = items.id}})}})// 本地保存定位uni.setStorageSync('location', that.locationInfo)// 更新全局定位数据uni.setStorageSync('located', true)}}}
</script><style scoped lang="scss">
.search-map {display: flex;justify-content: center;align-items: center;color: white;.search-text {color:#fff;font-size: 24rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
}
</style>

四、使用场景

自动获取或者是手动获取定位，组件内都会自动渲染获取的地点，不用监听：

<search @inputValue="bindinput" @confirm="bindConfirm"><location @watchPosition="watchComPosition" slot="left"></location> // 自动渲染定位<picker slot="center" mode="selector" :range="selectArray" @change="bindSelect"><view class="search-drop row-c"><view class="search-drop-text">{{select == 0 ? '我要买' : '我要卖'}}</view><u-icon color="#fff" name="arrow-down"></u-icon></view></picker><view slot="right" @click="$u.throttle(bindSearch, 3000)" class="row-c"><u-icon color="#fff" size="27" name="search"></u-icon></view>
</search>

想要用本地储存的定位数据（uni.getStorageSync('location')）来获取某个地区的商品数据：

async filter() {let that = this// 取消全部已收藏状态this.isSubAll = false// 获取本地储存的定位数据const cityCode = uni.getStorageSync('location')const handleObj = {city: cityCode.city_code ? cityCode.city_code : cityCode.province_code,cate: that.selected,pay_content: that.search,time: that.dateNum,delivery: that.packNum,selltype: that.typeNum,page: that.page,pagesize: that.pageSize,user_id: uni.getStorageSync('userinfo').user_id}    await purchase(handleObj).then((res) => {if (res.statusCode == 200) {that.loadingStatus = 'loadmore'that.lastPage = res.data.page_info.last_pagethat.total = res.data.page_info.totalconst resultArray = res.data.data// 如果有数据if (resultArray.length != 0) {// 如果是下拉加载，则叠加数据，否则，直接赋值if (that.pageFlag) {that.pageFlag = falsethat.buyListData = [...that.buyListData, ...resultArray]} else {that.buyListData = [...resultArray]}// 数据赋值->深拷贝，并刨除已收藏商品that.cacheArray = JSON.parse(JSON.stringify(that.buyListData))} else {// 如果没有数据，也不是下拉加载，直接赋值为空if (!that.pageFlag) {that.buyListData = []that.cacheArray = []}}}})
}

如果用户通过手动选择定位，来获取某个地区的商品数据，则可以通过组件内实现封装好的方法来监听获取的数据和变化：

// 监听子组件手动定位事件
watchComPosition() {this.page = 1this.filter()
}

uniapp —— 配合腾讯地图实现小程序自动定位相关推荐

腾讯地图微信小程序JavaScript SDK
简介腾讯位置服务为微信小程序提供了基础的标点能力.线和圆的绘制接口等地图组件和位置展示.地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品. 在此基础上,腾讯位置服务 ...
浅谈对腾讯云微信小程序解决方案服务端的理解（主要针对信道服务）
浅谈对腾讯云微信小程序解决方案服务端的理解(主要针对信道服务) 参考文章: (1)浅谈对腾讯云微信小程序解决方案服务端的理解(主要针对信道服务) (2)https://www.cnblogs.com/ ...
腾讯在线教育小程序开发实践之路
前言: 小程序是一种新的开放能力, 开发者可以快速地开发一个小程序,便可以在微信内被便捷得获取和传播,同时具有出色的使用体验.随着近两年来小程序风口的爆发,越来越多的开发者.企业开始接入小程序,那么在 ...
python操作微信小程序云端数据库_微信小程序·云开发云数据库的基本使用-微信小程序云开发实例-腾讯云微信小程序...
微信小程序·云开发云数据库的基本使用-微信小程序云开发实例-腾讯云微信小程序浏览量:1120 时间:2020-04-06
腾讯企业邮箱小程序撤回邮件_6个针对小型企业的有用的电子邮件营销技巧
腾讯企业邮箱小程序撤回邮件 Email remains one of the most lucrative marketing channels for businesses. Unlike PPC, ...
计算机毕业设计Python+uniapp扫码点餐微信小程序(小程序+源码+LW)
计算机毕业设计Python+uniapp扫码点餐微信小程序(小程序+源码+LW) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环境配置: Pychram社区版+ pyth ...
基于uniapp+unicloud开发的手机备忘录小程序
基于uniapp+unicloud开发的手机备忘录小程序注:该小程序是我的一个课设作品,现在发出来供大家学习参考,如有不好的地方,欢迎指正. 一.准备工作: 1.注册账号在unicloud官网注册 ...
uni-app(Vue.js)创建运行微信小程序
uni-app(Vue.js)创建运行微信小程序 1.全局安装 npm install -g @vue/cli 需要安装node,官方网站,否则提示npm不可用 2.创建uni-app 新建文件夹,选 ...
腾讯小程序服务器忙,使用腾讯云助手小程序管理腾讯云服务器
一般我们运维腾讯云服务器都是通过电脑端网页登录腾讯云后台进行管理维护,其实除了在电脑端管理腾讯云服务器等资源外,可以在手机微信端运维操作腾讯云服务器,简单方便,常用的腾讯云服务器关机.重启.续费.重置 ...
【uni-app项目】瑞幸咖啡小程序
技术栈框架:uni-app ui库:uview-ui 编辑器:HBuilderX 体验 PC端/移动端浏览器访问:yangyanyan.top/luckin-coffee 源码: GitHub:lu ...

uniapp —— 配合腾讯地图实现小程序自动定位

uniapp —— 配合腾讯地图实现小程序自动定位

先解释一下为什么要用腾讯地图实现自动定位

零、事前准备

一、列举实现步骤

二、先看效果

三、上代码

四、使用场景

uniapp —— 配合腾讯地图实现小程序自动定位相关推荐

最新文章

热门文章