邓洁 : 监听地图缩放

pages/index/HomeMainContent/HomeNavCard.vue

@@ -111,7 +111,6 @@
 			},
 			getCsTel() {
 				this.$api.getCsTel().then(res => {
-					console.log(res.data);
 					if (res.data.data) {
 						this.mobile = res.data.data.kf_phone
 					}

pages/index/map/map.vue

@@ -8,8 +8,8 @@
 			</view>
 		</view> -->
 		<view class="content">
-			<map id="map" @markertap="markerClick" :markers="marker" :show-location="true" :latitude="lat" :longitude="lng"
-				:show-scale="true"></map>
+			<map id="map" @markertap="markerClick" @regionchange="handleRegionChange()" :markers="marker"
+				:show-location="true" :latitude="lat" :longitude="lng" :show-scale="true"></map>
 		</view>
 		<!-- <view class="down-shop">
 			<ShowShopListItem :shopInfo="shopList" :is-adshow="true" :show-style="0"></ShowShopListItem>
@@ -21,22 +21,84 @@
 	export default {
 		data() {
 			return {
-				lat: '30.48772',
-				lng: '104.080145',
-				marker: [{
+				radius: '',
+				scaleM: [{
+						scale: 3,
+						milo: 1000000
+					},
+					{
+						scale: 4,
+						milo: 500000
+					},
+					{
+						scale: 5,
+						milo: 200000
+					}, {
+						scale: 6,
+						milo: 100000
+					}, {
+						scale: 7,
+						milo: 50000
+					},
+					{
+						scale: 8,
+						milo: 50000
+					}, {
+						scale: 9,
+						milo: 20000
+					}, {
+						scale: 10,
+						milo: 10000
+					}, {
+						scale: 12,
+						milo: 2000
+					}, {
+						scale: 13,
+						milo: 1000
+					},
+					{
+						scale: 14,
+						milo: 500
+					},
+					{
+						scale: 15,
+						milo: 200
+					},
+					{
+						scale: 16,
+						milo: 100
+					},
+					{
+						scale: 17,
+						milo: 50
+					},
+					{
+						scale: 18,
+						milo: 50
+					},
+					{
+						scale: 19,
+						milo: 20
+					}
+				],
+				scale: '',
+				lat: '30.48772', //纬度
+				lng: '104.080145', //经度
+				marker: [{ //用户当前位置
 						id: 1,
-						latitude: 30.488573,
-						longitude: 104.081248,
+						latitude: 30.48772,
+						longitude: 104.080145,
 						iconPath: '../../../static/map/sp_icon_dw.png',
 						width: '58rpx',
 						height: '72rpx',
 						rotate: 0,
 						alpha: 1
 					},
+					//周围标记点
 					{
 						id: 2,
-						latitude: 30.48772,
-						longitude: 104.080145,
+						latitude: 30.488573,
+						longitude: 104.081248,
 						// iconPath: '../../../static/map/sp_icon_dw.png',
 						width: '58rpx',
 						height: '72rpx',
@@ -75,12 +137,45 @@
 			this._mapContext.on("markerClusterCreate", (e) => {
 				console.log("markerClusterCreate", e);
 			});
+			//定时监听地图缩放
+			setInterval(() => {
+				this._mapContext.getScale({
+					success: res => {
+						// console.log('ressss', res);
+						this.scale = res.scale;
+					}
+				})
+			}, 500)
+		},
+		watch: {
+			scale(newVal, oldVal) {
+				console.log('thisscale',newVal, Math.round(newVal));
+				let ra=''
+				this.scaleM.forEach(item => {		
+					if (item.scale == Math.round(newVal)) {
+						ra = item.milo
+					}
+				})
+				this.getMapList(ra)
+				// let i = 16 //这是我在data里声明的缩放层级  这个i理解成16就行
+				// if (newVal >= i && oldVal < i) {
+				// 	console.log('如果新的缩放层级大于16并且旧的缩放层级小于16就触发这个添加icon的方法');
+				// 	// this.addMakers() //如果新的缩放层级大于16并且旧的缩放层级小于16就触发这个添加icon的方法
+				// } else if (newVal < i && oldVal >= i) {
+				// 	console.log('如果新的缩放层级小于16并且旧的大于16就触发删除icon的方法');
+				// 	// this.removerMakers() //如果新的缩放层级小于16并且旧的大于16就触发删除icon的方法
+				// }
+			}
 		},
 		created() {
 			this.getMapList()
 		},
 		methods: {
-			getMapList() {
+			handleRegionChange(e) {
+				console.log('地图缩放层级变化, 只能监听拖拽, 不能监听缩放', e);
+			},
+			getMapList(radius) {
+				console.log('this.radius',radius);
 				const realData = {
 					longitude: uni.getStorageSync('longitude'),
 					latitude: uni.getStorageSync('latitude'),
@@ -94,21 +189,23 @@
 				this.$api.getMap(mockData).then(res => {
 					console.log('getMap', res);
 					let obj = {}
+					let arr = []
 					if (res.statusCode === 200) {
-						// res.data.data.forEach(item => {
-						// 	obj = {
-						// 		id: parseInt(item.id),
-						// 		latitude: item.lat,
-						// 		longitude: item.lng,
-						// 		// iconPath: '../../../static/map/sp_icon_dw.png',
-						// 		width: '58rpx',
-						// 		height: '72rpx',
-						// 		rotate: 0,
-						// 		alpha: 1
-						// 	}
-						// })
-						// this.marker.push(obj)
-						// console.log('this.marker', this.marker);
+						res.data.data.forEach(item => {
+							obj = {
+								id: parseInt(item.id),
+								latitude: item.lat,
+								longitude: item.lng,
+								// iconPath: '../../../static/map/sp_icon_dw.png',
+								width: '58rpx',
+								height: '72rpx',
+								rotate: 0,
+								alpha: 1
+							}
+							arr.push(obj)
+						})
+						// this.marker=arr
+						console.log('this.marker', this.marker);
 					}
 				})
 			},