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

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

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

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

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

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开发小程序如何获取用户位置,并跳转到当前位置?

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

		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"]

完成代码分享

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



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

你可能感兴趣的:(wx小程序,uni-app,小程序)