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

 更新时间:2022年08月22日 11:16:11   作者:Flyer_741  
因为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小程序获取定位城市内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序开发之IOS和Android兼容的问题

    微信小程序开发之IOS和Android兼容的问题

    这篇文章主要介绍了微信小程序开发之IOS和Android兼容的问题的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-09-09
  • jquery SweetAlert插件实现响应式提示框

    jquery SweetAlert插件实现响应式提示框

    为了满足用户体验度,使用SweetAlert插件实现响应式提示框效果非常好,下面通过这篇文章给大家介绍jquery SweetAlert插件实现响应式提示框,需要的朋友可以参考下
    2015-08-08
  • 详解JS深拷贝与浅拷贝

    详解JS深拷贝与浅拷贝

    这篇文章主要介绍了JS深拷贝与浅拷贝的相关资料,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-08-08
  • js仿苹果iwatch外观的计时器代码分享

    js仿苹果iwatch外观的计时器代码分享

    这篇文章主要介绍了JS+CSS3实现的类似于苹果iwatch计时器特效,很实用的代码,推荐给大家,有需要的小伙伴可以参考下。
    2015-08-08
  • js算法实例之字母大小写转换

    js算法实例之字母大小写转换

    实现javascript 英文首字母大写有多种方法,下面这篇文章主要给大家介绍了关于js算法实例之字母大小写转换的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • 简单了解JavaScript arguement原理及作用

    简单了解JavaScript arguement原理及作用

    这篇文章主要介绍了简单了解JavaScript arguement原理及作用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • 基于ionic实现下拉刷新功能

    基于ionic实现下拉刷新功能

    这篇文章主要为大家详细介绍了基于ionic实现下拉刷新功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • Script的加载方法小结

    Script的加载方法小结

    对动态加载脚本,需要重点关注的一个问题是,所动态加载的JS脚本的接口依赖问题。
    2011-01-01
  • 微信打开网址添加在浏览器中打开提示的办法

    微信打开网址添加在浏览器中打开提示的办法

    这篇文章主要介绍了微信打开网址添加在浏览器中打开提示的办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • js实现下拉菜单效果

    js实现下拉菜单效果

    本文主要介绍了js实现下拉菜单效果的实例,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03

最新评论