之前用到加载多边形,通过缩放,拖动会产生范围的变化,需要重新加载当前视窗的多边形

地图加载

<view class="page-section page-section-gap">
			<map id="mapInfo" ref="mapInfo" class="mapinfo" 
			 :latitude="coordinate.lat" :longitude="coordinate.lng"
			 :markers="covers" :show-location="true" 
			 :polygons="polygons" :scale="scale"
			 @markertap="markertap" @callouttap="markertap" @regionchange="regionchange">
			</map>
</view>
属性
@regionchange="regionchange"

当区域产生变化,会触发regionchange方法,其他的属性在前述文章中已经做了描述,这里不再赘述

方法
regionchange() {
				let _this = this
				let nmap = uni.createMapContext("mapInfo", this)//创建map的上下文对象
				let scale = this.scale//当前缩放等级
				//获取当前视窗的缩放等级
				nmap.getScale({
					success: res => {
						scale = res.scale
					}
				})
				//获取当前地图的视野范围
				//接口调用成功的回调函数,res = {southwest, northeast},西南角与东北角的经纬度
				nmap.getRegion({
					success: res => {
						let obj = {
							latitude: {
								min: res.southwest.latitude.toString(),
								max: res.northeast.latitude.toString()
							},
							longitude: {
								min: res.southwest.longitude.toString(),
								max: res.northeast.longitude.toString()
							}
						}
						// //捕获到对角线经纬度后,算一下四个角的经纬度
						let scopeCoordinates = [{
							lng: 0,
							lat: 0
						}]
						let query = {
							mapType: 2,
							scopeCoordinates: []
						}
						//西北角
						query.scopeCoordinates.push({
							lng: obj.longitude.min,
							lat: obj.latitude.max
						})
						// 东北角
						query.scopeCoordinates.push({
							lng: obj.longitude.max,
							lat: obj.latitude.max
						})
						// 东南角
						query.scopeCoordinates.push({
							lng: obj.longitude.max,
							lat: obj.latitude.min
						})
						// 西南角
						query.scopeCoordinates.push({
							lng: obj.longitude.min,
							lat: obj.latitude.min
						})
                        //调用方法传参给后端
						MapGisApi.getGridByMapScope(query).then(res => {
							if (res.data.code == 0) {
								//这里写加载多边形或者其他图形的处理方法,具体请看前文
							}
						})
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					}
				})
			},

这个开发用在微信小程序中,在工具中或者Hbuilder运行到浏览器,缩放的时候不会触发,在真机环境可以触发regionchange方法,其他环境还没试过。

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐