一、获取当前的地理位置、速度: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>

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐