uniapp相关地图 API调用

目录

[一、 注意事项： manifest.json需增加配置](#一、 注意事项： manifest.json需增加配置)

[二、获取用户收货地址 [uni.chooseAddress]](#二、获取用户收货地址 [uni.chooseAddress])

[三、获取当前的地理位置、速度 [uni.getLocation]](#三、获取当前的地理位置、速度 [uni.getLocation])

[四、打开地图选择位置、查看位置(导航) [uni.chooseLocation] [uni.openLocation]](#四、打开地图选择位置、查看位置(导航) [uni.chooseLocation] [uni.openLocation])

五、使用腾讯地图逆地址解析接口实现城市自动定位回显

---

一、 注意事项： manifest.json需增加配置

"mp-weixin": {
	"requiredPrivateInfos": ["chooseLocation", "getLocation", "getLocation","chooseAddress"],
	"permission": {
		"scope.userLocation": {
			"desc": "你的位置信息将用于小程序位置接口的效果展示"
		}
	}
},

二、获取用户收货地址 [uni.chooseAddress]

API接口参考：https://uniapp.dcloud.net.cn/api/other/choose-address.html#chooseaddress

1、效果图

2、vue页面代码

<template>
	<view>
		<u-icon size="12" name="arrow-down" label="选择地址" labelPos="left"
						@click="citySelect()"></u-icon>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		
		methods: {
			citySelect(){
				uni.chooseAddress({
					type: 'wgs84', 
					success: (res) => {
						console.log(res)
					},
					fail: (err) => {
						console.error('获取位置失败：', err);
					}
				})
			},
		}
	};
</script>

<style>
	page {
		height: 100%;
		background: white;
	}

	.homePage {
		padding-bottom: 5px;

	}
</style>

三、获取当前的地理位置、速度 [uni.getLocation]

API接口参考：https://uniapp.dcloud.net.cn/api/location/location.html#getlocation

1、调用方式

uni.getLocation({
	type: 'wgs84', // 返回可以用于uni.openLocation的经纬度，默认为wgs84的gps坐标
	success: (res) => {
		console.log(res)
	},
	fail: (err) => {
		console.error('获取位置失败：', err);
	}
});

2、res结果

{  
    "latitude": 29.56471,  
    "longitude": 106.55073,  
    "speed": -1,  
    "accuracy": 65,  
    "verticalAccuracy": 65,  
    "horizontalAccuracy": 65,  
    "errMsg": "getLocation:ok"  
}

四、打开地图选择位置、查看位置(导航) [uni.chooseLocation] [uni.openLocation]

API接口参考：

https://uniapp.dcloud.net.cn/api/location/location.html#chooselocation

https://uniapp.dcloud.net.cn/api/location/open-location.html#openlocation

1、效果图

2、子组件代码

<template>
	<view>
		<map id="map" longitude="116.397470" latitude="39.908823" scale="14" @tap="chooseLocation"
			style="width: 100%; height: 300px;"></map>
		<!-- <view v-if="location">
			位置：{{ location.address }}
			<button @click="navigateTo">导航到这里</button>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				location: null
			}
		},
		methods: {
			chooseLocation() {
				const that = this;
				uni.chooseLocation({
					success(res) {
						that.location = {
							latitude: res.latitude,
							longitude: res.longitude,
							address: res.address,
						};
						that.callParent();
					},
					fail(err) {
						console.log('选择位置失败：', err);
					},
				});
			},
			callParent() {
				//传值回父组件
				this.$emit('parentMethod', this.location);
			},
			navigateTo() {
				if (this.location) {
					uni.openLocation({
						latitude: this.location.latitude,
						longitude: this.location.longitude,
						address: this.location.address,
						success() {
							console.log('导航成功');
						},
						fail(err) {
							console.log('导航失败：', err);
						},
					});
				}
			},
		}
	}
</script>

<style>
</style>

3、父组件使用子组件

<template>
	<view class="box">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelWidth="120" labelPosition="top" labelAlign="left" :labelStyle="{'fontSize':'14px'}" :model="form"
			<u-form-item label="位置信息" prop="location">
				<view>{{location.address}}</view>
				<map-select @parentMethod="callLocation"></map-select>
			</u-form-item>
		</u--form>
	</view>
</template>

<script>
	import MapSelect from "@/pages/assembly/MapSelect.vue";
	export default {
		components: {
			'map-select': MapSelect
		},
		data() {
			return {
				form:{},
				location:{}
			};
		},

		methods: {
			callLocation(location){
				console.log("父组件print:",location);
				this.location=location;
			}
		},
	};
</script>

<style>
	page {
		height: 100%;
		background: white;
	}

	.box {
		margin: 10px 20px 20px 20px;
	}

	.confirmButton {
		padding-bottom: 50px;
	}

	.u-form-item__body__left.data-v-5e7216f1 {
		position: relative;
	}

	.u-form-item__body__left__content.data-v-5e7216f1 {
		position: absolute;
		top: 0;
	}
</style>

4、res结果

{  
    "errMsg": "chooseLocation:ok",  
    "name": "雾都宾馆",  
    "address": "重庆市渝中区上曾家岩24号",  
    "latitude": 29.565184,  
    "longitude": 106.551766  
}

五、使用腾讯地图逆地址解析接口实现城市自动定位回显

uniapp中腾讯地图SDK-安装及配置（自动定位回显城市）-CSDN博客