MP_XOIL_company_new/BagStation/pages/overviewMap/overviewMap.vue

<template>
	<view style="position: relative;">
		<addressSelector @closeFooterScroll='closeFooterScroll' ref='addressSelector'
			@mapEventListeners='mapEventListeners' :polyline="polyline" :Route="Route" />
		<footerBar ref='footerBar' :spareMapScale='spareMapScale' @reset='reset' v-model="radius" @upScale='upScale'
			:mapScale='mapScale' :details='details' />
		<view @touchmove='touchmove' class="map_body">
			<map :circles='circles' @regionchange='regionchange' @tap='poitap' @updated='mapUpdated' :scale='mapScale'
				@callouttap='callouttap' :enable-scroll='enableScroll' @markertap='markertap' :polyline="polyline"
				subkey="UTXBZ-BUH6D-TQD44-HCEG4-UKOFT-U2BDN" layer-style='2' id="map_Id" :show-location="true"
				:markers="markers" class="map_xx" :latitude="coordinate.latitude" :longitude="coordinate.longitude">
				<cover-view v-if="circles[0].radius!==0" class="coverimage"
					:style="{width:`${img.width}rpx`,height:`${img.height}rpx`}">
					<cover-image :style="{width: `${img.width}rpx` ,height:`${img.height}rpx`}"
						src="../../static/img/change_xy.png"></cover-image>
				</cover-view>
				<!-- <cover-view slot="callout">
					<cover-view  v-for="(item,index) in markers" :key='index' class="customCallout" :marker-id="item.id">
						<cover-image style="width: 150rpx;height: 78rpx;position: absolute;" :src="item.imgCustomCallout">
						</cover-image>
						<cover-view class="customCallout_text">{{Number(item.price).toFixed(2)||2}}</cover-view>
					</cover-view>
				</cover-view> -->
			</map>
		</view>
	</view>
</template>
<script>
	import amapFile from '@/utils/qqmap-wx-jssdk.js'
	import oilSiteApi from '@/api/oil-site.js'
	import addressSelector from './components/addressSelector.vue'
	import footerBar from './components/footer.vue'
	/*
    全站地图组件:顶部筛选框 (addressSelector),中间地图 ( map ),底部控制器(footerBar);
	为了计算距离新开了一个子线程 : @property {Function} worker ;
	map地图的事件及控件:
	{
		circles:圆，默认当前视野中心点  监听手势缩放视野范围变动完成之后,判断当前缩放比例是否大于9, 大于9，园置空并移动视野时停止计算距离，小于保留并获取屏幕中心点移动
		amapFile:腾讯地图sdk,
		subkey:腾讯地图个性地图 key,
		layer-style:个性地图样式,
		@regionchange:视野变动事件,
		@markertap:点击点事件
	}
 */
	export default {
		/*
		 * @property {Object}	
		 * @property {Object}	
		 * @property {Object}	
		 * @property {Array}	
		 * @property {Function}	
		 * @property {Function}	
		 */
		components: {
			addressSelector,
			footerBar
		},
		data() {
			return {
				img: {
					width: 40,
					height: 50
				},
				radius: 20000,
				LastCoordinate: [],
				timer: null,
				TXSDK: null,
				polyline: [],
				circles: [],
				//路线规划 起点终点数据 //起点默认是我的位置
				Route: {
					start: {
						longitude: '',
						latitude: '',
						title: ''
					},
					end: {
						longitude: '',
						latitude: '',
						title: ''
					}

				},
				myCoordinate: {
					longitude: '',
					latitude: '',
				},
				enableScroll: true,
				coordinate: {
					longitude: '',
					latitude: '',
					title: '我的位置'
				},
				markers: [],
				mapContext: null,
				details: null,
				spareMarkers: [],
				selePrice: null,
				mapScale: 9,
				spareMapScale: 9
			}
		},
		onLoad(e) {
			uni.getSystemInfo({
				success(e) {
					console.log('设备信息', e)
				}
			})
			this.initFn();
			// this.newMapMoveToLocation(this.circles[0].longitude,this.circles[0].latitude)
		},
		created() {
			this.TXSDK = new amapFile({
				key: 'UTXBZ-BUH6D-TQD44-HCEG4-UKOFT-U2BDN'
			});
		},
		watch: {
			mapScale: function(n, o) {
				if (n < 7) {
					setTimeout(() => {
						this.colseMarks()
					}, 500)
				} else if (n >= 7) {
					setTimeout(() => {
						this.circles[0].radius = this.radius;
						this.touchend();
						this.woerks({
							msg: 'distance',
							coordinate: {
								latitude: this.coordinate.latitude,
								longitude: this.coordinate.longitude
							},
							radius: this.radius,
							markes: this.markers
						});
					}, 500)
				}
			},
			radius: function(n, o) {
				if (this.circles[0].radius == 0) {
					uni.showToast({
						title: '请打开区域图',
						icon: 'none'
					})
					return
				}
				this.circles[0].radius = n;
				this.touchend()
			},
		},
		methods: {
			reset() {
				// if(this.mapScale<7){
				// 	return
				// }
				this.coordinate.latitude = this.myCoordinate.latitude,
					this.coordinate.longitude = this.myCoordinate.longitude,
					this.newMapMoveToLocation(this.myCoordinate.longitude, this.myCoordinate.latitude);
				setTimeout(() => {
					this.touchend();
				}, 1000)
			},
			closeLable() {
				this.markers.forEach((item, index) => {
					item.callout.display = 'BYCLICK'
				})
			},
			openLable() {
				this.markers.forEach((item, index) => {
					item.callout.display = 'ALWAYS'
				})
			},
			getRegion() {
				if (this.timer) {
					clearTimeout(this.timer);
				}
				this.timer = setTimeout(() => {
					// this.mapScale==9?this.openLable():this.closeLable()
				}, 500);
			},
			upScale() {
				let that = this;
				that.mapScale = that.mapScale >= 9 ? 3 : 9;
				// that.spareMarkers = that.mapScale;
				// this.mapContext.getScale({
				// 	success:function(e){
				// 		setTimeout(()=>{
				// 			that.mapScale = e.scale;
				// 			setTimeout(()=>{
				// 				that.mapScale =  that.mapScale>=9?3:9;
				// 			},0)
				// 		},0)
				// 	}
				// })
			},
			colseMarks() {
				this.LastCoordinate.forEach((item) => {
					this.markers[item].callout.display = 'BYCLICK'
				});
			},
			closeFooterScroll() {
				// this.$refs.footerScroll.screenClose();  /oilSiteInfo/getSiteByGeoHashNewA
				// this.$refs.footerScroll.mapIconClose();
			},
			getMarks() {
				oilSiteApi.wholeStationMap({
					oilProductCode: "",
					siteChannel: ""
				}).then(res => {
					// let list = this.locationProcessing(res.data);
					// list.length = 100;
					this.markers = this.locationProcessing(res.data);
					this.spareMarkers = JSON.parse(JSON.stringify(this.markers));
					console.log(this.spareMarkers, '////////////////////////')
					// markersArray.forEach((item,index)=>{

					// })
					// for (let i=0;i<parseInt(list.length/300);i++) {

					// 	setTimeout(()=>{
					// 		this.markers = this.markers.concat(this.asynchronousLoading(i*300,list))
					// 		console.log(i,'********')
					// 	},i*5000)
					// }
					// this.markers = this.markers.concat(this.asynchronousLoading(0,markersArray))
					// console.log(this.markers.length,'////////')
					// console.log(this.locationProcessing(res.data), '********')
				})
			},
			asynchronousLoading(index, array) {
				return array.slice(index, index + 300)
			},
			onChange(e) {
				console.log(3)
			},
			//监听地图移动中
			touchmove() {
				// let that = this
				// console.log(2);
				// this.mapContext.getCenterLocation({
				// 	success: function(e) {
				// 		// that.circles[0].longitude = e.longitude;
				// 		// that.circles[0].latitude = e.latitude;
				// 		// that.markers.forEach(item => {
				// 		// 	let juli = that.getDistance(that.coordinate.latitude, that
				// 		// 		.coordinate.longitude, item.latitude, item.longitude)
				// 		// 	if (juli < 1000) {
				// 		// 		item.callout.display = 'ALWAYS'
				// 		// 		console.log('小于1000米', item, juli)
				// 		// 	} else {
				// 		// 		item.callout.display = 'BYCLICK'
				// 		// 	}
				// 		// })
				// 	}
				// })
			},
			//监听拖动结束 获取地图中心点计算所有点距离屏幕中心点的位置符合条件 显示气泡
			touchend() {
				let that = this
				this.mapContext.getCenterLocation({
					success: function(e) {
						console.log('拖动结束')
						if (that.circles[0].radius == 0) {
							return
						};
						that.circles[0].longitude = e.longitude;
						that.circles[0].latitude = e.latitude;
						that.woerks({
							msg: 'distance',
							coordinate: {
								latitude: e.latitude,
								longitude: e.longitude
							},
							markes: that.markers,
							radius: that.radius
						});
					}
				})

			},
			//开启线程
			woerks(e) {
				let that = this
				let worker = wx.createWorker('static/workers/request/index.js', {
					useExperimentalWorker: true
				}) // 文件名指定 worker 的入口文件路径，绝对路径
				try {
					worker.onMessage(function(res) {
						that.LastCoordinate.forEach((item) => {
							if (res.msg.includes(item)) return;
							if (that.markers[item]) {
								that.markers[item].callout.display = 'BYCLICK'
							}
						});
						res.msg.forEach((item) => {
							that.markers[item].callout.display = 'ALWAYS'
						});
						that.LastCoordinate = res.msg;
						worker.terminate()
					});
					// 监听worker被系统回收事件
					worker.onProcessKilled(function() {
						console.log('系统回收')
						// 重新创建一个worker
						// wx.createWorker()
					});
					worker.postMessage({
						msg: e,
					})
				} catch (e) {
					console.log(e, '******************')
					//  uni.showToast({
					//  	title:'********',
					// icon:'none'
					//  });
					// this.woerks();
					//TODO handle the exception
				}

			},
			//视野变化监听
			regionchange(e) {
				let that = this;
				//如果变化结束并是手势,获取当前缩放比例 赋值
				if (e.type == 'end') {
					this.mapContext.getScale({
						success: function(es) {
							that.spareMapScale = es.scale;
							if (e.causedBy == 'scale') {
								if (es.scale < 7) {
									that.circles[0].radius = 0;
									that.colseMarks();
								}
								if (that.circles[0].radius == 0 && es.scale >= 7) {
									that.circles[0].radius = that.radius;
									that.touchend()
								}
							}
							if (e.causedBy == "update") {
								if (es.scale < 7) {
									that.circles[0].radius = 0;
									that.colseMarks()
								}
								if (that.circles[0].radius == 0 && es.scale >= 7) {
									that.circles[0].radius = that.radius;
									that.touchend()
								}
							}
							if (e.causedBy == "drag") {
								that.touchend()
							}
						},

					})

				}
				// else{
				// 	that.coordinate.latitude = e.latitude;
				// 	that.coordinate.longitude = e.longitude;
				// }
				console.log(e, '视野变化')
			},
			mapUpdated(e) {
				let that = this
				console.log('%c 更新', 'font-size:50px;color:red');
				console.log(e, '*****************************************')
				// that.mapContext.getScale({
				// 	success: function(e) {
				// 		// that.$nextTick(function() {
				// 		// 	if (points && points.length == 1) {
				// 		// 		setTimeout(()=>{
				// 		// 		},1000)
				// 		// 	}
				// 		// 	console.log(that.mapScale)
				// 		// })
				// 		// setTimeout(()=>{
				// 		// that.mapScale = e.scale
				// 		// },500)
				// 		console.log(e, '当前缩放比例')
				// 	}
				// })
			},
			//初始化方法
			initFn() {
				let that = this
				this.mapContext = uni.createMapContext("map_Id", this);
				this.getCurrentLocation();
				this.UpdateAddress();
				this.getMarks();
				setTimeout(() => {
					if (this.markers.length !== 0 && this.Route.start.latitude !== '') {
						that.woerks({
							msg: 'distance',
							coordinate: {
								latitude: that.coordinate.latitude,
								longitude: that.coordinate.longitude
							},
							radius: that.radius,
							markes: that.markers
						});
					}
				}, 1000)
			},
			//地图更新事件监听 分发事件 
			async mapEventListeners(e) {
				switch (e) {
					case 'updateRoute':
						this.mapRoutePlanning(arguments[1] ? arguments[1] : this.Route.start, arguments[2] ? arguments[
							2] : this.Route.end, arguments[3] ? arguments[3] : 'LEAST_TIME')
						break;
					case 'UpdateLocation':
						this.UpdateLocation(arguments[1], arguments[2])
						break;
					case 'cardPlanning':
						this.Route = arguments[1]
						this.mapRoutePlanning()
						break;
					case 'details':
						this.details = {};
						let d = arguments[1]
						this.$nextTick(function() {
							this.details = d
							this.newMapMoveToLocation(this.details.longitude, this.details.latitude)
						})
						break;
					case 'apiScreen':
						//接口更新站点 
						console.log('接口筛选')
						let {
							oilProductCode, siteChannel
						} = arguments[1];
						let markerList = await this.mapUpdateMarkers(oilProductCode, siteChannel);
						//处理站点数据回显
						this.spareMarkers = this.locationProcessing(markerList);
						this.filterMarkers(JSON.parse(JSON.stringify(this.spareMarkers)), this.$refs.addressSelector
							.datassFn());
						break;
					case 'localScreen':
						// 手动筛选 备份下数据
						console.log(this.spareMarkers, '手动筛选')
						let markers = JSON.parse(JSON.stringify(this.spareMarkers));
						let filterData = this.$refs.addressSelector.datassFn()
						this.filterMarkers(markers, filterData)
						break;
					case 'MoveToLocation':
						arguments[1] ? (this.newMapMoveToLocation(this.Route.start.longitude, this.Route.start
							.latitude)) : (this.zoomRoutePlanning());
						// arguments[1] ? (this.zoomRoutePlanning([this.Route.start])) : (this.zoomRoutePlanning());
						break;

				}
			},
			// 更新路线规划
			async mapRoutePlanning(start = this.Route.start, end = this.Route.end, strategy = 'LEAST_TIME') {
				// 获取路径
				let res = await this.getMapRoutePlanning(start, end, strategy);
				//处理数据
				this.RoutePlanningHandle(res);
				//缩放显示所有经纬度
				this.zoomRoutePlanning();
				// 获取筛选数据 更新油站站点
				let {
					oilProductCode,
					juLi,
					siteChannel
				} = this.$refs.addressSelector.datassFn();
				let markerList = await this.mapUpdateMarkers(this.polyline[0].points, oilProductCode, juLi,
					siteChannel);
				console.log(markerList, '-*-*更新油站站点*-')
				//处理油站站点数据并显示
				this.spareMarkers = this.locationProcessing(markerList);
				let markers = JSON.parse(JSON.stringify(this.spareMarkers));
				let filterData = Object.assign(this.$refs.addressSelector.datassFn(), this.$refs.footerScroll
					.filter());
				this.filterMarkers(markers, filterData);
			},
			// 更新最近搜索
			UpdateLocation(Route, type) {
				let recentSearch = uni.getStorageSync('recentSearch') || [];
				let data = {
					...Route,
					type: type,
					id: `${Route.start.latitude}${Route.start.longitude}${Route.end.latitude}${Route.end.longitude}`
				};
				let key = recentSearch.filter(item => item.id);
				if (!key.includes('e.id')) {
					console.log('没有重复')
					recentSearch.length !== 0 ? recentSearch[0].type == 'lately' ? recentSearch.splice(0, 1, data) :
						recentSearch.unshift(data) : recentSearch.push(data);
					uni.setStorageSync('recentSearch', recentSearch);
				}

			},
			//监听更新位置事件
			UpdateAddress() {
				let that = this
				uni.$on('UpdateAddress', function(region, type) {
					console.log(`%c ${(type=='start'?'起点更新':'终点更新')} 地址→ ${region.title}`,
						'color:red;font-size:50px')
					that.Route[type].longitude = region.location.lng;
					that.Route[type].latitude = region.location.lat;
					that.Route[type].title = region.title;
					setTimeout(() => {
						that.coordinate.latitude = that.Route.start.latitude;
						that.coordinate.longitude = that.Route.start.longitude;
						that.newMapMoveToLocation(that.Route.start.longitude, that.Route.start.latitude);
						if (that.mapScale < 9) {
							that.mapScale = 9
							// that.spareMarkers = that.mapScale
						};
						that.$nextTick(function() {
							that.touchend()
						})
					}, 500)
				})
			},
			openMapApp() {
				console.log(this.details, '导航')
				let that = this
				wx.openLocation({
					latitude: that.details.latitude, // 纬度
					longitude: that.details.longitude, // 经度
					name: that.details.siteName, // 地址名称
					address: that.details.siteName, // 详细地址
					success: function(r) {
						console.log(r)
					},
					fail: function(res) {
						console.log('拉起失败啦', res)
					}
				})
			},
			//获取路线规划
			getMapRoutePlanning(start, end, strategy = 'LEAST_TIME') {
				console.log('获取路线规划', start, end, )
				var _this = this;
				return new Promise(function(res, rej) {
					_this.TXSDK.direction({
						sig: 'mOPvEv4WmyaxymycTYy00pSiad2jnQil',
						mode: 'driving',
						from: start,
						to: end,
						policy: strategy,
						success: function(e) {
							console.log('获取路线规划成功')
							res(e)
						},
						fail(e) {
							rej(e)
							console.log('获取路线规划失败', e)
						}
					})
				})
			},
			//获取到的路线规划数据进行处理
			RoutePlanningHandle(res) {
				var _this = this;
				var ret = res;
				var coors = ret.result.routes[0].polyline,
					pl = [];
				//坐标解压（返回的点串坐标，通过前向差分进行压缩）
				var kr = 1000000;
				for (var i = 2; i < coors.length; i++) {
					coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
				}
				//将解压后的坐标放入点串数组pl中
				for (var i = 0; i < coors.length; i += 2) {
					pl.push({
						latitude: coors[i],
						longitude: coors[i + 1],
						lat: coors[i],
						lon: coors[i + 1]
					})
				}
				//设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
				_this.polyline = [{
					points: pl,
					color: '#FF6700',
					width: 4
				}]
			},
			/*  缩放路线规划 includePoints方法  points:经纬度数组  padding:边距  参考 https://uniapp.dcloud.io/api/location/map?id=cdreatemapcontext  */
			zoomRoutePlanning(points, padding) {
				let that = this
				try {
					let paddingTop = this.$refs.addressSelector.getElement();
					console.log(this.$refs.addressSelector.getElement(), '高度')
					this.mapContext.includePoints({
						points: points ? points : that.polyline[0].points,
						padding: padding ? padding : [paddingTop + 40, 105, 75, 10],
						// padding: padding ? padding : [50, 10, 50, 10],
						success: function(e) {
							console.log('-----------')
						}
					})

				} catch (e) {
					uni.showToast({
						title: e,
						icon: 'none'
					})
					//TODO handle the exception
				}
			},
			// 点击地图
			poitap() {
				this.enableScroll = true;
				this.$refs.addressSelector.menuList.forEach(item => item.SublistOpen = false);
				this.$refs.footerBar.close();
				this.details = null;
			},
			//更新markers点
			async mapUpdateMarkers(oilProductCode, siteChannel) {
				let data = {
					oilProductCode: oilProductCode ? oilProductCode : '0#',
					siteChannel: siteChannel,

				}
				let taht = this;
				console.log(data, '查询参数')
				return new Promise(function(re, rj) {
					oilSiteApi.wholeStationMap(data).then(markerList => {
						if (markerList.code !== 20000) {
							setTimeout(() => {
								uni.showToast({
									title: 'Error' + markerList.code + markerList.msg,
									icon: 'none'
								})
							}, 500)
							rj(markerList.code + markerList.msg)
							return
						}
						// if (markerList.data.length == 0) {
						// 	setTimeout(() => {
						// 		uni.showToast({
						// 			title: '暂无油站信息' + markerList.data.length,
						// 			icon: 'none'
						// 		})
						// 	}, 500)
						// 	rj('暂无油站信息' + markerList.data.length)
						// 	return
						// }
						console.log(markerList.data, '返回的点')
						re(markerList.data)
					})
				})
			},
			//定位处理
			locationProcessing(markerList) {
				let that = this
				// markerList.length = 100
				console.log(markerList, '----')
				markerList.forEach((item, index) => {
					let configure = {
						siteId: item.id,
						id: Number(`${index}`),
						imgCustomCallout: this.olitype(item.siteChannel),
						// title: `${item.price}`,
						iconPath: '../../static/img/tt.png',

						width: 20,
						height: 20,
						// joinCluster: true,
						callout: {
							content: `${this.moneyIntercept(item.price) }`,
							color: '#FFFFFF',
							fontSize: '25rpx',
							bgColor: '#FF4A4A',
							borderRadius: '10px',
							padding: 10,
							display: 'BYCLICK'
						}
						// customCallout: {
						// 	anchorX: 0,
						// 	anchorY: 10,
						// 	display: "BYCLICK"
						// }
					}
					item = Object.assign(item, configure);
				});
				return markerList
			},
			//地图组件控件
			assembly() {},
			//点击气泡事件
			async callouttap(e) {
				console.log(e, this.markers, this.markers[e.detail.markerId], '*****')
				let seleMark = this.markers.filter(item => item.id == e.detail.markerId);
				console.log(seleMark[0].siteId, '筛选的id')
				// this.enableScroll  = true
				let details = await oilSiteApi.getSiteDetails({
					latitude: String(this.myCoordinate.latitude),
					longitude: String(this.myCoordinate.longitude),
					siteId: seleMark[0].siteId
				});
				console.log(details, '***')
				if (details.code !== 20000) {
					uni.showToast({
						title: details.msg,
						icon: 'none'
					})
					return
				}
				this.mapEventListeners('details', Object.assign(details.data, {
					id: seleMark[0].siteId
				}))
			},
			//点击定位点事件
			markertap(e) {
				this.callouttap(e)
				console.log(e, '点击了ma')
			},
			//获取当前位置 绘制⚪ 设置起点位置和我的位置
			getCurrentLocation() {
				let that = this
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						({
							latitude: that.coordinate.latitude,
							longitude: that.coordinate.longitude
						} = res);
						that.circles.push({
							longitude: that.coordinate.longitude,
							latitude: that.coordinate.latitude,
							fillColor: '#FF670033',
							radius: that.radius,
							strokeWidth: 2,
							color: '#FF670033'
						});
						that.myCoordinate = {
							longitude: that.coordinate.longitude,
							latitude: that.coordinate.latitude,
						};
						that.Route.start = Object.assign(that.Route.start, that.coordinate);

					}
				});
			},
			//移动当前中心点 参数:经纬度
			newMapMoveToLocation(longitude, latitude) {
				let that = this
				this.mapContext.moveToLocation({
					longitude: longitude,
					latitude: latitude,
					success(e) {
						// that.mapContext.getScale({
						// 	success: function(e) {
						// 		setTimeout(() => {
						// 			that.mapScale = e.scale;
						// 			setTimeout(() => {
						// 				that.mapScale = 15
						// 			}, 500)
						// 		}, 500)
						// 	}
						// })
						// that.$nextTick(function(){
						// 	that.mapScale = null  
						// 	setTimeout(()=>{
						// 		that.mapScale  = 16
						// 	},0)
						// })
						console.log(`%c 移动 坐标→ ${longitude}-${latitude}`, 'color:green;font-size:20px');

					},
				})
			},
			addfn(e) {
				if (e !== null) {
					setTimeout(() => {
						this.newMapMoveToLocation(this.markers[e].longitude, this.markers[e].latitude);
						this.addfn(e < this.markers.length ? e + 1 : null);
					}, 1500)
				}

			},
			//手动筛选
			filterMarkers(e, w) {
				console.log(e, w, '手动筛选条件')
				let filterMarkers = [];
				//第一步筛选 是否高速
				let highSpeedMarkers = Object.keys(w).includes('highSpeed') && w.highSpeed ? e.filter((item, index) => {
					return Number(w.highSpeed) == 2 ? item : item.highSpeedMark == Number(w.highSpeed)
				}) : e;
				this.markers = highSpeedMarkers;
				console.log(this.markers, '***************************')
			},
			copy(obj) {
				let newobj = null // 接受拷贝的新对象
				if (typeof(obj) == 'object' && typeof(obj) !== null) { // 判断是否是引用类型
					newobj = obj instanceof Array ? [] : {} // 判断是数组还是对象
					for (var i in obj) {
						newobj[i] = this.copy(obj[i]) // 判断下一级是否还是引用类型
					}
				} else {
					newobj = obj
				}
				return newobj
			},
			//拖动辅助控件
			dragMap(e, w) {
				console.log(e, w, '**')
				this.enableScroll = w
				this.newMapMoveToLocation(e.longitude, e.latitude)
				uni.$on('dragMap', function(e) {
					this.enableScroll = e
					console.log(e, '////////')
				})
			}
		}
	}
</script>

<style scoped>
	@import url("./map.css");

	.coverimage {
		position: absolute;
		/* z-index: 999999; */
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		/* background: blanchedalmond; */
		border-radius: 50%;
		overflow: hidden;
		/* opacity: .3; */
		/* height: 50rpx; */
	}

	.map_xx {
		width: 100%;
		height: 100%;
	}
</style>