uniapp 开发微信小程序,获取经纬度转化详细地址

正常开发中,我们通过uni.getLocation 只能得到经纬度,微信又没有给我们具体的地理位置,这个时候我们可以通过反编译,来获取详细地址。操作如下


第一步:我们先去腾讯地图申请key腾讯地图 
在 控制台==> 应用管理 ==> 我的应用 ==>创建应用 ==> 添加key==> 除了必填的,勾选WebserviceAPI

第二步:下载微信小程序JavaScriptSDK

地址:小程序sdk 

第三步:配置安全域名设置

登录微信公众平->开发->开发设置->服务器域名->将https://apis.map.qq.com填入request合法域名

 第四步: 把刚刚第二步下载的sdk.js放在一个目录下,我这边用的是压缩的(min)

 第五步:在需要的页面引入

var QQMapWX = require('@/utils/qqmap-wx-jssdk.min.js')

 然后这里有new 一个实例对象,这个对象身上有一个方法reverseGeocoder,然后把我们用uni.getLocation获取到的经纬度传过去,就能得到详细地址。话不多说,直接上代码

<script>
	var QQMapWX = require('@/utils/qqmap-wx-jssdk.min.js')
	
	export default {
		data() { 
		
			return {
				
				
			}
		},
		onLoad() {
			this.getLocation()
		},
		onShow() {
		},
		onReady() {

		},
		methods: {
			// 获取当前位置
			getLocation(){
				const _this = this
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						let location = {
							longitude: 0,
							latitude: 0,
							province: "",
							city: "",
							area: "",
							street: "",
							address: "",
						};
						uni.getLocation({
							type: 'gcj02',
							geocode: true,
							success: function(res) {
								console.log(res,'获取经纬度');
								uni.setStorageSync('latitude', _this.latitude)
								uni.setStorageSync('longitude', _this.longitude)
								location.longitude = res.longitude;
								location.latitude = res.latitude;
								const qqmapsdk = new QQMapWX({
									key: '你在腾讯地图申请的key'  //申请的key
								});
								qqmapsdk.reverseGeocoder({
									location,
								    success: function(res) {
										console.log(res, '获取地址');
										let info = res.result;
										location.province = info.address_component.province;
										location.city = info.address_component.city;
										location.area = info.address_component.district;
										location.street = info.address_component.street;
										location.address = info.address;
										console.log(location, '地址');
										
			                        },
								});
							},	
							fail: function(err) {
								_this.$util.modal({
									c: '获取位置失败,请重新进入小程序并同意获取位置',
								}, () => wx.openSetting())
							}
						})
					},
					fail: () => {
						this.tipsAddress()
					}
				})
			},
			tipsAddress () {
				this.$util.showModal({
					content: '为了正常使用,请授权「位置信息」- 「使用小程序时允许」',
					showCancel: false,
				}).then(() => {
					wx.openSetting({
						success: (res) => {
							if (res.errMsg === 'openSetting:ok') {
								console.log(res.authSetting, 'res');
								if (!res.authSetting['scope.userLocation']) {
									this.tipsAddress()
								} else {
									this.getLocation()
								}
							}
						},
						fail: () => {
							this.tipsAddress()
						}
					})
				})
			},
			
		},
	}
</script>

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app是一款基于Vue.js框架的跨平台开发工具,可以同时开发微信小程序、H5、App等多个平台的应用。在uni-app中,我们可以很方便地使用地图组件来标记点。 首先,我们需要引入uni-app官方提供的地图组件,在页面的json文件中添加以下代码: ``` { "usingComponents": { "uni-map": "@dcloudio/uni-map/uni-map" } } ``` 然后,在需要使用地图的页面中,在template中添加以下代码: ``` <template> <view> <uni-map :longitude="longitude" :latitude="latitude" :markers="markers" :include-points="true" ></uni-map> </view> </template> ``` 在script中,我们需要定义地图的经纬度和标记点的数据: ``` <script> export default { data() { return { longitude: 113.324520, latitude: 23.099994, markers: [{ id: 1, longitude: 113.324520, latitude: 23.099994, title: '标记点1', iconPath: '/static/marker.png', width: 30, height: 30 }, { id: 2, longitude: 113.326520, latitude: 23.099994, title: '标记点2', iconPath: '/static/marker.png', width: 30, height: 30 }] } } } </script> ``` 我们可以通过设置longitude和latitude来指定地图的中心点,通过markers来设置标记点的位置、标题、图标等信息。iconPath需要提前准备好对应的图标文件。 最后,在地图组件上设置:include-points="true",可以使得地图自动包含所有标记点,确保能够显示所有标记点。 以上就是使用uni-app来在微信小程序中标记点的方法。通过引入uni-app提供的地图组件,结合相关的属性和数据即可实现地图的标记点功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值