地图拖拽后，点击按钮回到当前位置

使用到的方法：@regionchange拖拽地图实现；@click="onToGetLocation"点击回到当前位置实现；

使用组件：uni.createMapContext(mapId,this) 绑定 map的id，第二个参数传入组件实例this，以操作组件内 map 组件(不是必传)； url:https://uniapp.dcloud.io/api/location/map?id=createmapcontext
eg：this.mapContext = uni.createMapContext(‘map’);
this.mapContext.moveToLocation();

注：map组件要加上show-location配合使用

主体

<map id="map" :latitude="latitude" :longitude="longitude" @regionchange="changeEvent" show-location>
	<cover-view class="jc-location__iconsImg" @click="onToGetLocation">
		<cover-image class="jc-imgs" src="https://course.jchen.art/static/images/icon-location.png"></cover-image>
	</cover-view>
</map>

mapContext 通过 mapId 跟一个 map组件绑定，通过它可以操作对应的 map 组件。

this.mapContext = uni.createMapContext('map');

@regiοnchange=“changeEvent” 实现拖拽功能

data() {
	return {
		changeEvent: debounce(this.handleRegionChange, 300),   //debounce()函数：防抖动
	};
},

handleRegionChange(e) {
	if (e.type === 'end' && e.causedBy === 'drag') {  //是判断拖拽 放开鼠标后的当前位置
		this.mapContext.getCenterLocation({    //getCenterLocation获取当前地图中心的经纬度，返回的是 gcj02 坐标系
			success: res => {
				const { longitude, latitude } = res;
				//this.getLocationInfo({ longitude, latitude });  //根据接口获取当前位置周边地址
			}
		});
	}
},

@click=“onToGetLocation” 点击回到当前位置

onToGetLocation(){
	this.mapContext.moveToLocation();   //moveToLocation将地图中心移动到当前定位点，需要配合map组件的show-location使用
	//下走接口可以不需要
	// uni.getLocation({
		// 	type: 'gcj02',
		// 	success: (res)=> {
		// 		const { longitude, latitude } = res;
		// 		this.getLocationInfo({ longitude, latitude });
		// 	}
	// })
},