uniapp 获取当前位置和地理信息(微信小程序和APP)

一、在微信小程序中获取位置信息

1、首先引入amap-wx.130.js文件,在项目中可以新建文件夹common,在下面引入该js文件

2、在使用的页面引入该js,

<template>
    <view></view>
</template>
<script>
import amap from '@/common/amap-wx.130.js'
export default {
		data() {
			return {
                amapPlugin:null
            }
        }
}

3、获取定位信息(注意先需要申请高德地图的key)申请方式如下连接

vue+高德地图/ el-amap-CSDN博客

<template>
    <view></view>
</template>
<script>
import amap from '@/common/amap-wx.130.js'
export default {
		data() {
			return {
                amapPlugin:null
            }
        },
        async onLoad(item) {
            this.amapPlugin = new amap.AMapWX({
				key: '你的key值'
			});
            var that = this
				this.amapPlugin.getRegeo({
					success: (data) => {
						console.log('小程序获取定位成功')
						console.log(222, data)
						// 经度
						that.data3.lng = data[0].longitude;
						// 纬度
						that.data3.lat = data[0].latitude;
						// 省
						that.data3.province = data[0].regeocodeData.addressComponent.province
						// 市
						that.data3.city = data[0].regeocodeData.addressComponent.city
						// 区
						that.data3.district = data[0].regeocodeData.addressComponent.district

						uni.setStorageSync('longitude', that.data3.lng)
						uni.setStorageSync('latitude', that.data3.lat)
						uni.setStorageSync('longitude2', that.data3.lng)
						uni.setStorageSync('latitude2', that.data3.lat)
						uni.setStorageSync('province', that.data3.province)
						uni.setStorageSync('city', that.data3.city)
						uni.setStorageSync('district', that.data3.district)
					},
					fail: function(res) {
						console.log(res)
					}
				});
        }
}

二、app获取位置信息

<template>
    <view></view>
</template>
<script>
import amap from '@/common/amap-wx.130.js'
export default {
		data() {
			return {
                amapPlugin:null
            }
        },
        methods:{
            async chooseSpotApp() {
				
				let that = this
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					geocode: true,
					success: function(res) {
						console.log(res)
						// 经度
						that.data3.lng = res.longitude;
						// 纬度
						that.data3.lat = res.latitude;
						// 省
						that.data3.province = res.address.province
						// 市
						that.data3.city = res.address.city
						// 区
						that.data3.district = res.address.district

						uni.setStorageSync('longitude', that.data3.lng)
						uni.setStorageSync('latitude', that.data3.lat)
						uni.setStorageSync('longitude2', that.data3.lng)
						uni.setStorageSync('latitude2', that.data3.lat)
						uni.setStorageSync('province', that.data3.province)
						uni.setStorageSync('city', that.data3.city)
						uni.setStorageSync('district', that.data3.district)
                        let key = '替换你的key'; //高德地图key
					uni.request({
						url: 'https://restapi.amap.com/v3/geocode/regeo?location=' + that
							.longitude + ',' + that.latitude + '&key=' + key,
						success: (res) => {
							console.log('高德地图API接口返回信息', res.data.regeocode.addressComponent)

							uni.setStorageSync('sheng', res.data.regeocode.addressComponent
								.province)
						},
						fail: (error) => {
							console.log(error)
						}
					})
					},
					fail(res) {
						console.log(111, res)
					}
				});
			},
        }
}

要在uniapp获取定位位置信息,可以使用uniapp自带的API,即`uni.getLocation()`方法。该方法可以获取当前设备的地理位置信息。 使用该方法需要注意以下几点: 1. 首先,需要在`manifest.json`文件中添加对应的权限,如下所示: ```json { "permissions": { "scope.userLocation": { "desc": "获取用户地理位置信息" } } } ``` 2. 调用`uni.getLocation()`方法来获取地理位置信息。该方法接受一个对象参数,可以设置以下属性: - `type`: 定位方式,可选值有`wgs84`(默认)`gcj02`(国测局加密经纬度坐标) - `altitude`: 是否获取高度信息,默认为`false` - `geocode`: 是否需要逆地址解析,默认为`false`,即不需要获取详细地址信息 - `success`: 成功回调函数 - `fail`: 失败回调函数 - `complete`: 完成回调函数 示例代码如下: ```javascript uni.getLocation({ type: 'gcj02', altitude: true, geocode: true, success: (res) => { console.log(res); }, fail: (err) => { console.log(err); } }); ``` 其中,`res`对象包含以下属性: - `latitude`: 纬度,浮点数,范围为-90~90,负数表示南纬 - `longitude`: 经度,浮点数,范围为-180~180,负数表示西经 - `altitude`: 高度,单位m,只有当`altitude`为`true`时才有 - `horizontalAccuracy`: 水平精度,单位m - `verticalAccuracy`: 垂直精度,单位m,只有当`altitude`为`true`时才有 - `speed`: 速度,单位m/s - `accuracy`: 位置的精度,单位m - `address`: 详细地址信息,只有当`geocode`为`true`时才有 - `errMsg`: 错误信息,调用成功时为`"getLocation: ok"`,调用失败时为具体错误信息 注意:在HbuilderX中需要在manifest.json中添加如下代码: ```json "mp-weixin":{ "appid":"wx*****", "miniprogramRoot": "./", "permission": { "scope.userLocation": { "desc": "获取用户地理位置信息" } } } ``` 其中"wx*****"是你的微信小程序AppID。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值