uni-app 地图拖拽后，点击按钮回到当前位置（微信小程序）

目的：如图，实现在拖动地图后，点击右下角定位按钮，视图回到我当前的位置。

思路：
①首先三个图标（右下角定位图标，地图中心位置图标，我的位置图标（自定义的））。

②分别将定位图标和地图中心位置图标固定在右下角和地图中心处。我的位置图标，根据获取到的我的当前位置后添加到map的markers中显示。

③给右下角定位图标绑定点击事件，在事件函数中实现地图中心移至我的位置处。

说明：如果我的位置图标不想自定义的话，，可以直接用自带的，，只需要在map里面加上show-location即可（是这个样子的
）。

实现：

html：map中放两个cover-image分别放中心位置图标和右下角定位图标，给map绑上id和ref（这里均为“map”）：

<map id="map" ref="map" style="width:750rpx;height:100vh;" :latitude="latitude" :longitude="longitude" :markers="covers">
	<cover-image class="img-map1" src="../../static/image/img/zhongxin.png"></cover-image>
	<cover-image class="img-map2"  src="../../static/image/img/dingwei.png" @click="clickcontrol"></cover-image>
</map>

data（）{}里面:

export default {
	data() {
		return {
			latitude: 34.74725,  //当前位置纬度
			longitude: 113.62493, //当前位置经度
			covers: [
			//covers[0]是我当前的位置，往后是背包位置。现在经纬度是初始的，onLoad之后，会把当前定位的经纬度赋给covers[0]即显示我的位置(橙色定位图标)
				{
					id:0,
			        latitude: 34.74725,
			        longitude: 113.62493, 
			        iconPath: '../../static/image/img/my.png',
					width:20,
					height:20
				},{
					id:1,
			        latitude: 34.8133,
			        longitude: 113.509267,
			        iconPath: '../../static/image/img/bag.png',
					width:20,
					height:20
				},{
					id:2,
			        latitude: 34.8151,
			        longitude: 113.509265,
			        iconPath: '../../static/image/img/bag.png',
					width:20,
					height:20
				},{
					id:3,
			        latitude: 34.8123,
			        longitude: 113.509269,
			        iconPath: '../../static/image/img/bag.png',
					width:20,
					height:20
				},
			],
        }
	}
}

onshow（）{ } 里面：获取我当前的位置

onShow() {
		var that = this;
		// 获取经纬度
			uni.authorize({
				scope: 'scope.userLocation',
				success() {
					uni.getLocation({
						type: 'gcj02',
						 altitude: true, //高精度定位
						 //定位成功，更新定位结果
						 success: function(res) {
							console.log(res)
							that.latitude=res.latitude;
							that.longitude=res.longitude;
							that.covers[0].latitude=res.latitude;
							that.covers[0].longitude=res.longitude;
						}
					});
				}
			});
	},

methods：{}里面：

//右下角定位按钮的点击事件
clickcontrol(){
	uni.createMapContext("map", this).moveToLocation({   //moveToLocation将地图中心移动到当前定位点，需要配合map组件的show-location使用
        latitude: this.latitude,
        longitude: this.longitude
	});  
},

css：

.img-map1{
	width: 60rpx;
	height: 60rpx;
	position: fixed;
	bottom: 47%;
	left: 46%;
}
.img-map2{
	width: 60rpx;
	height: 60rpx;
	position: fixed;
	bottom: 12vh;
	right: 2vh;
	background-color: #FFFFFF;
	border-radius: 5px;
}

​