uni-app获取位置_uniapp 获取定位

一、获取当前的地理位置、速度：uni.getLocation(OBJECT)

1、申请腾讯地图的key：在https://lbs.qq.com/中注册，登录后，单击网站右上角的“控制台”，进入控制台页面

2、在manifest.json文件中配置腾讯地图

"h5": {
		"sdkConfigs": {
			"maps": {
				"qqmap": {
					"key": "你的key"
				}
			}
		}
	}

3、配合map组件定位"我的位置"

（1）map的属性

longitude（类型为Number，没有默认值，表示中心经度）

latitude（类型为Number，没有默认值，表示中心纬度）

markers（类型为Array数组，类型为数组即表示地图上可以有多个，没有默认值，表示标记点）

<template>
	<view>
		<map class="map" :latitude="latitude" :longitude="longitude" :markers="markers"></map>
	</view>
</template>
 
<script>
	export default{
		data(){
			return{
				latitude:"", //纬度
				longitude: "",//经度
				markers:[ //标记点用于在地图上显示标记的位置
					{
                                                 id: 1,
						latitude: "", //纬度
						longitude: "" ,//经度
						iconPath: "/static/images/business_map/my.png", //图标路径
						width: "30", //图标的宽
						height: "30" //图标的高
					}
				]
			}
		},
		onLoad()  {
			uni.getLocation({
				type: 'gcj02', //国家测绘局坐标
				success: (res) => {
					console.log("当前位置的经度：",res.longitude);
					console.log("当前位置的纬度：",res.latitude);
					this.latitude = res.latitude
					this.longitude = res.longitude
					
					this.markers[0].latitude = this.latitude
					this.markers[0].longitude = this.longitude
				}
			})
		}
	}
</script>
 
<style>
	.map{
		width: 100%;
		height: 500rpx;
	}
</style>

二、微信小程序获取详细地址

1、下载微信小程序JavaScript SDK

2、将sdk放入项目的static下

<template>
	<view>
		<map class="map" :latitude="latitude" :longitude="longitude" :markers="markers"></map>
		<view>城市：{{ city }}</view>
		<view>省份：{{ province }}</view>
		<view>区（县）：{{ district }}</view>
		<view>街道：{{ street }}</view>
		<view>门牌号：{{ streetNum }}</view>
		<view>城市代码：{{ cityCode }}</view>
		<view>地址详情：{{ address }}</view>
	</view>
</template>
 
<script>
	import QQMapWX from '../../static/js/qqmap-wx-jssdk.js'
	export default{
		data(){
			return{
				latitude:"", //纬度
				longitude: "",//经度
				markers:[ //标记点用于在地图上显示标记的位置
					{
						id:1,
						latitude: "", //纬度
						longitude: "" ,//经度
						iconPath: "/static/images/business_map/my.png", //图标路径
						width: "30", //图标的宽
						height: "30", //图标的高
						callout:{   //自定义标记点上方的气泡窗口
							content: "", //文本内容
							display: "ALWAYS", //常显示气泡
							padding: 5, //文本边缘留白
							borderRadius: 8, //callout边框圆角
							fontSize: 14  //文字大小
						}
					}
				],
				city: "",
				province: "",
				district: "",
				street: "",
				streetNum: "",
				cityCode: "",
				address: ""
			}
		},
		onLoad: () => {
			qqmapsdk = new QQMapWX({
				key: "X5YBZ-G4HLG-X3AQI-QHDGT-G73G3-62BF4"
			})
			uni.getLocation({
				type: 'gcj02', //国家测绘局坐标
				success: (res) => {
					console.log("当前位置的经度：",res.longitude);
					console.log("当前位置的纬度：",res.latitude);
					this.latitude = res.latitude
					this.longitude = res.longitude
					
					this.markers[0].latitude = this.latitude
					this.markers[0].longitude = this.longitude
					
					//获取地理位置信息和附近的POI列表
					qqmapsdk.reverseGeocoder({
						location: {
							latitude: this.latitude,
							longitude: this.longitude
						},
						//返回成功
						success: (res)=>{
							console.log(res);
							this.city = res.result.ad_info.city
							this.province = res.result.ad_info.province
							this.district = res.result.ad_info.district
							this.street = res.result.address_component.street
							this.streetNum = res.result.address_component.street_number
							this.cityCode = res.result.ad_info.city_code
							this.address = res.result.address
							//将获取的城市赋值到气泡content中，在map组件中显示
							this.markers[0].callout.content = this.city
						},
						fail:(err)=>{
							console.log(err);
						}
					})
				}
			})
		}
	}
</script>
 
<style>
	.map{
		width: 100%;
		height: 500rpx;
	}
</style>