uniapp开发小程序之使用地图选择位置与定位到用户当前位置

uniapp开发小程序如何使用地图让用户选择位置，并跳转到相关位置？

			getUserLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						console.log(res.latitude, res.longitude)
						uni.showToast({
							title: '已经来到当前手机定位',
							duration: 800
						});
					},
					fail: err => {
						console.error(err);
					}
				});
			},

执行上述方法小程序会自动跳转到地图搜索页，搜索选择地址后，点击确定然后返回所选地址的经纬度，那如何跳转到所选位置呢？我们进一步完善

<map style="width: 100%; height: 50vh;" 
:longitude="curLongitude" :latitude="curLatitude" id="myMap" />

data() {
	return {
		curLongitude: 113.324520,
		curLatitude: 23.099994，
        mapContext: null,
	}
},

onReady() {
	this.mapContext = uni.createMapContext('myMap')
	console.log(this.mapContext)
}

			getUserLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						console.log(res.latitude, res.longitude)
						this.curLongitude = res.longitude
						this.curLatitude = res.latitude
                        //this.mapContext.moveToLocation()：调用地图上下文中提供的移动到当前地图中心点位置的方法，让地图自动定位到新的中心点位置
						this.mapContext.moveToLocation()
						uni.showToast({
							title: '已经来到当前手机定位',
							duration: 800
						});
					},
					fail: err => {
						console.error(err);
					}
				});
			},

uniapp开发小程序如何获取用户位置，并跳转到当前位置？

<map style="width: 100%; height: 50vh;" :longitude="curLongitude" :latitude="curLatitude" id="myMap" />

		data() {
			return {
				curLongitude: 113.324520,
				curLatitude: 23.099994,
				mapContext: null,
				selectedLocation: null
			}
		},

onReady() {
			this.mapContext = uni.createMapContext('myMap')
			console.log(this.mapContext)
},

			searchLocation() {
               //uni.chooseLocation()：调用微信内置地图打开位置选择器，允许用户选择位置。
				uni.chooseLocation({
					success: res => {
						this.selectedLocation = {
							longitude: res.longitude,
							latitude: res.latitude,
							name: res.name,
							address: res.address,
						}
						console.log(this.selectedLocation)
						this.curLongitude = this.selectedLocation.longitude
						this.curLatitude = this.selectedLocation.latitude
                        //this.mapContext.moveToLocation()：调用地图上下文中提供的移动到当前地图中心点位置的方法，让地图自动定位到新的中心点位置
						this.mapContext.moveToLocation()
						uni.showToast({
							title: '已经来到' + this.selectedLocation.name,
							duration: 800
						});
					},
					fail: err => {
						console.log("已取消")
					}
				})
			}

报错

如何遇到报错：getLocation:fail fail:require permission desc

这个错误主要是因为小程序在获取地理位置时没有进行权限授权，或者用户拒绝了该权限导致的

在manifest.json中配置如下：

      "permission": {
        "scope.userLocation": {
          "desc": "获取地理位置用于小程序定位"
        }
      }，
      "requiredPrivateInfos": ["chooseLocation", "getFuzzyLocation"]

完成代码分享

两个功能的完整代码附上：

<template>
	<view class="page-map">
		<map style="width: 100%; height: 50vh;" :longitude="curLongitude" :latitude="curLatitude" id="myMap" />
		<view class="currentPosition" @click="getUserLocation">
			<uni-icons type="location-filled" size="30"></uni-icons>
			定位
		</view>
		<view style="top:34%" class="currentPosition" @click="searchLocation">
			<uni-icons type="search" size="30"></uni-icons>
			搜索
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				curLongitude: 113.324520,
				curLatitude: 23.099994,
				mapContext: null,
				selectedLocation: null
			}
		},
		onReady() {
			this.mapContext = uni.createMapContext('myMap')
			console.log(this.mapContext)
		},
		methods: {
			searchLocation() {
				uni.chooseLocation({
					success: res => {
						this.selectedLocation = {
							longitude: res.longitude,
							latitude: res.latitude,
							name: res.name,
							address: res.address,
						}
						console.log(this.selectedLocation)
						this.curLongitude = this.selectedLocation.longitude
						this.curLatitude = this.selectedLocation.latitude
						this.mapContext.moveToLocation()
						uni.showToast({
							title: '已经来到' + this.selectedLocation.name,
							duration: 800
						});
					},
					fail: err => {
						console.log("已取消")
					}
				})
			},
			getUserLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						console.log(res.latitude, res.longitude)
						this.curLongitude = res.longitude
						this.curLatitude = res.latitude
						this.mapContext.moveToLocation()
						uni.showToast({
							title: '已经来到当前手机定位',
							duration: 800
						});
					},
					fail: err => {
						console.error(err);
					}
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	.currentPosition {
		position: absolute;
		right: 5%;
		top: 42%;
		z-index: 9;
		border-radius: 50%;
		background-color: white;
		width: 90rpx;
		height: 91rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>

觉得有用的话 点个红心把~~