记录uni.app开发微信小程序中地图的使用,以及项目中的解决办法

标题先讲一下需求:需要获取用户的地址信息以及经纬度,并在地图中展示时出来

uniapp官方也提供了api uni.getLocation(OBJECT) getLocation只能获取用户的经纬度,不能获得当前的地址信息(地址信息只支持app获取), 而 uni.chooseLocation是可以获取到用户的信息与经纬度,但是这个api是有一些bug (搜索外省的搜不到,必须点击右上角完成,才能获取地址) 简单的功能还可以使用

下面是实现思路

自己写一个地图组件,顺带美观一下
1.获取用户授权地址信息,如果授权 则uni.getLocation获取用户的经纬度,且在地图中放置当前位置的标点
2.如果没有授权 则需要引导用户打开授权功能 因为用户拒绝之后必须用组件的方式才能重新获取授权(小程序就是这么规定的)
3.获取经纬度之后 markers可以显示地图中当前位置的标注 当用户打开地图组件之后就会显示当前的位置
4.当用户点击地图时切换标注位置 获取用户想要的位置信息,获取到用户信息暂时在页面 当用户点击确定传给后台 完成

<map v-if="mapShow" id='map' ref='map' style="position: fixed;top:0;left:0 ;width: 100%; height:100vh;z-index: 9;"
		 :latitude="latitude" :longitude="longitude" :markers="covers" @tap="taps">
		</map>

//引导用户授权的组件
<view  v-if="showModal">
			<view class="content">
				<view class='tes'>
					<view>获取地址失败,请开启定位权限，否则地图功能将无法使用</view>
				</view>
				<button class='bottom' open-type="openSetting" @tap="openSetting">定位授权</button>
			</view>
		</view>

第一部分代码

init(){
		let this_= this
		uni.authorize({//获取授权
					scope: 'scope.userLocation',//地址
					success(res) {
						uni.getLocation({
							type: 'gcj02', // 返回国测局坐标
							geocode: true,
							success: function(res) {
								console.log(res)
								this_.longitude = res.longitude
								this_.latitude = res.latitude //已经获取到了经纬度
								var arr = {
									width: '60rpx',
									height: '60rpx',
									latitude: res.latitude,
									longitude: res.longitude,
									iconPath: 'https://s2.ax1x.com/2020/03/10/8CvKmt.png',
								}
								this_.covers.push(arr) //*在地图中展示位置标注*
								
							},
						})
					},
					fail(res) { //授权失败  这里写的是让授权的组件显示 ,并引导用户点击
						this_.showModal = true 
					}
				})
}

这里是授权失败重新获取用户授权

openSetting() {
				uni.openSetting({//这里会打开用户授权设置
					success(rs) {
						console.log(rs.authSetting) 
						if(res.authSetting){ //授权成功
							this.showModal = false  //关闭弹窗 并且执行第一步的操作.
							this.init()
						}
					}
				})
			},

第二部分

小程序地图官方实例,点击我

在scrpit中引入  小程序地图的webserviceAPI
import QQMapWX from '../../utils/qqmap-wx-jssdk.min.js';
	const qqmapsdk = new QQMapWX({
		key: 'key'
	})

taps(e) { //点击地图
				console.log(e.detail)
				this.getAddressName(e.detail).then((objs) => {
					this.addressObj = { //这里拿到地址详细信息      
													//在地图页面显示当前的详细地址,后面传给后台
													//在地图中定位一个确定按钮  我这里就不写了
						longitude: e.detail.longitude,
						latitude: e.detail.latitude,
						address: objs.address,//地址
					}
					console.log(this.addressObj)
					var arr = {
						width: '60rpx',
						height: '60rpx',
						latitude: e.detail.latitude,
						longitude: e.detail.longitude,
						iconPath: 'https://s2.ax1x.com/2020/03/10/8CvKmt.png',
					}
					this.covers = []  
					this.covers.push(arr) // 重新展示地图的信息
				});
			},


//获取经纬度的信息
	getAddressName(addressObj) {
				return new Promise((res) => {
					qqmapsdk.reverseGeocoder({
						location: {
							latitude: addressObj.latitude,
							longitude: addressObj.longitude
						},
						get_poi: 1,
						poi_options: "page_size=1;page_index=1",
						output: 'jsonp',
						success: (e) => {
							console.log(e)
							res(e.result);
						},
						fail: err => {
							res(err);
						}
					})
				})
			},

记得在uniapp配置中写入下图api,否则页面会有问题