uniapp微信小程序获取当前定位城市信息的实例代码

目录
  • 一、事先准备
  • 二、正式代码使用
  • 补充:UNIAPP获取当前城市和坐标
  • 总结

一、事先准备

此处用的是腾讯地图的jdk

1、在腾讯地图开发上申请key

2、 WebServiceAPI选择签名校验获取SK

3、 uniapp上勾选位置接口

4、在腾讯地图上下载微信小程序javaScript SDK放入项目里

二、正式代码使用

提示:可能会出现引入jdk时报错

解决方法:

	*把jdk最后一行暴漏方式改为export default
	引入时用import就行了*
// 1、首先在需要用到的地方引入下载的jdk
import QQMapWx from '../../common/qqmap-wx-jssdk.min.js'
// 2、通过腾讯地图key初始化
const qqmapSdk = new QQMapWx({
			key: 'xxxxxxx' // 在腾讯地图上申请的key
		})
// 3、获取微信定位授权方法
getAuthorize () {
	uni.authorize({
		scope: 'scope.userLocation',
		success: (res) => {
			this.getLocation()
		},
		fail: (err) => {
			uni.showModal({
				content: '需要授权位置信息',
				confirmText: '确认授权'
			}).then(res => {
				if (res['confirm']) {
					uni.openSetting({
						success: res => {
							if (res.authSetting['scope.userLocation']) {
								uni.showToast({
									title: '授权成功',
									icon: 'none'
								})
							} else {
								uni.showToast({
									title: '授权失败',
									icon: 'none'
								})
							}
							this.getLocation()
						}
					})
				}
				if (res['cancel']) {
					// 取消授权
					this.getLocation()
				}
			})
		}
	})
}
// 4、开始获取定位方法
getLocation () {
	uni.getLocation({
		type: 'gcj02',
		success: (res) => {
			const { latitude, longitude } = res
			qqmapSdk.reverseGeocoder({
				location: latitude ? `${latitude},${longitude }` : '',
				sig: 'xxxx', // 这个sig就是上面要准备的第二项SK
				success: (val) => {
					console.log('这就是要获取的当前所在城市的相关信息', val)
				},
				fail: (err) => {
					console.log('获取城市失败')
				}
			})
		},
		fail: (err) => {
			if (err.errMsg === 'getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF' || err.errMsg === 'getLocation:fail system permission denied') {
				uni.showModal({
					content: '请开启手机定位服务',
					showCancel: false
				})
			} else if (err.errMsg === 'getLocation:fail:system permission denied') {
				uni.showModal({
					content: '请给微信开启定位权限',
					showCancel: false
				})
			}
		}
	})
}

补充:UNIAPP获取当前城市和坐标

uni.getLocation({
	    type: 'wgs84',
        success: res=> {
		    console.log(res)
            console.log('当前位置的经度:' + res.longitude);
            console.log('当前位置的纬度:' + res.latitude);
	  }
	});

总结

到此这篇关于uniapp微信小程序获取当前定位城市信息的文章就介绍到这了,更多相关uniapp小程序获取定位城市内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

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

    目录 一丶申请腾讯位置服务开发者密钥 二丶下载微信小程序JavaScriptSDK 三丶安全域名设置 四丶代码编写 4.1丶项目配置 4.2丶定义变量 4.3丶编写方法 4.4丶页面加载时调用 4.5丶数据展示 五丶真机调试效果图 有一个月没写博客了,最近在写项目,需要用到腾讯位置服务,获取附近商家位置.这里我就记录一下,实现过程. 一丶申请腾讯位置服务开发者密钥 申请地址:腾讯位置服务 - 立足生态,连接未来 官网教程:微信小程序JavaScript SDK | 腾讯位置服务  点击创建应用,

  • uniapp微信小程序获取当前定位城市信息的实例代码

    目录 一.事先准备 二.正式代码使用 补充:UNIAPP获取当前城市和坐标 总结 一.事先准备 此处用的是腾讯地图的jdk 1.在腾讯地图开发上申请key 2. WebServiceAPI选择签名校验获取SK 3. uniapp上勾选位置接口 4.在腾讯地图上下载微信小程序javaScript SDK放入项目里 二.正式代码使用 提示:可能会出现引入jdk时报错 解决方法: *把jdk最后一行暴漏方式改为export default 引入时用import就行了* // 1.首先在需要用到的地方引

  • 微信小程序获取手机号,后端JAVA解密流程代码

    小程序获取手机号,后端JAVA解密流程代码 微信官方文档获取手机号流程地址,先看下最好方便理解下面步骤 实现思路,步骤如下 1.前端需先调用官方wx.login接口获取登录凭证code. 2.后端接收code 调用官方接口地址获取用户秘钥 sessionKey. 3.前端通过官方getPhoneNumber获取encryptedData,iv 4.前端通过参数**[encryptedData] .[iv] .[sessionKey]** 发送请求后端接口,解密用户手机号 小程序获取session

  • 微信小程序实现音频文件播放进度的实例代码

    问题描述 在微信小程序中经常会用到控制文件播放的滑块,通过滑块可控制音频播放进度,下面即用代码实现. 解决方案 首先用.wxml与 .wmss 代码实现进度条的效果,再通过 .js 文件控制进度条的进度和进度条的时间显示. .wxml中(播放进度结构的代码): <view class="content-play-progress"> <text>{{play.currentTime}}</text> <view> <slider a

  • 微信小程序中button去除默认的边框实例代码

    微信小程序中button去除默认的边框的实现方法如下所示: button { position:relative; display:block; margin-left:auto; margin-right:auto; padding-left:14px; padding-right:14px; box-sizing:border-box; font-size:18px; text-align:center; text-decoration:none; line-height:2.5555555

  • 微信小程序实现即时通信聊天功能的实例代码

    项目背景:小程序中实现实时聊天功能 一.服务器域名配置 配置流程 配置参考URL:https://developers.weixin.qq.com/miniprogram/dev/api/api-network.html 二.nginx中配置反向代理加密websocket(wss) upstream websocket{ hash $remote_addr consistent; server 127.0.0.1:9090 weight=5 max_fails=3 fail_timeout=30

  • 微信小程序实现抖音播放效果的实例代码

    最近项目要做一个类似于抖音的一个视频播放 需要小程序完成 在再次确定了需要这个需求的情况下就开始了(其实因为不是说这个功能不好做主要是但心做出来肯定不流畅 卡顿什么的 优化不好优化) 然后就开始啦 思路使用微信的 swiper 完成竖向滑动 然后分页加载首先先加载一次加载10个当滑动到第7个的时候加载下一页 (要处理自动播放的问题和加载多个有多个同时播放的问题) 效果图 代码 <swiper class="swiper" vertical='true' easing-functi

  • 微信小程序实现多选框功能的实例代码

    我们先来看看效果: 两种状态: 选中/不选中 wxml <!-- 选择 S --> <view wx:for="{{riderCommentList}}" wx:for-item="item" wx:key="index" bindtap="checkboxChange" data-value="{{item.value}}" data-index="{{index}}"

  • 微信小程序获取用户头像昵称组件封装实例(最新版)

    目录 一.前言 二.组件使用 下载组件 组件导入 引用组件 使用组件 三.浅谈业务逻辑设置 注意事项 兼容性 四.结语 一.前言 微信小程序将在2022年11月08日对获取用户头像昵称信息的API再一次进行改动,这次的改动比较大. 更多详情查看公告:公告直达链接 我的项目比较多,而且大部分都是只需要获取用户的头像以及昵称,并不需要像官方的“最佳实践案例”那样,还需要用户设置其他信息.因此自己进行了一个组件封装,以弹窗形式让用户授权或设置头像以及昵称. 博客中也会浅谈一下该如何对新旧接口进行业务逻

  • 微信小程序 使用picker封装省市区三级联动实例代码

    微信小程序 使用picker封装省市区三级联动实例 目前学习小程序更多的是看看能否二次封装其它组件,利于以后能快速开发各种小程序应用.目前发现picker的selector模式只有一级下拉,那么我们是否可以通过3个picker来实现三级联动模板的形式来引入其它页面中呢?答案是肯定可以的.那么我的思路是这样的: 1.使用template模板语法进行封装,数据从页面传入 2.根据picker组件的语法,range只能是一组中文地区数组,但是我们需要每个地区的唯一码来触发下一级联动数据.这样,我的做法

  • 微信小程序 location API接口详解及实例代码

    微信小程序 location API 接口: 现在微信小程序火了 ,利用假期时间学习了下,微信小程序的基础知识,嘿嘿! 以下是记录学习微信小程序 location API接口,并且写了一个小实例来记录,如有错误之处还请指正. 微信小程序的位置接口共有两个: 1.wx.getLocation(OBJECT)获取当前的地理位置.速度. 2.wx.openLocation(OBJECT) 使用微信内置地图查看位置 然后,根据object参数说明,结合module模块化重写了下两个接口在暴露出来引用,让

随机推荐