uniapp map组件的regionchange方法(二)
之前用到加载多边形,通过缩放,拖动会产生范围的变化,需要重新加载当前视窗的多边形地图加载<view class="page-section page-section-gap"><map id="mapInfo" ref="mapInfo" class="mapinfo":latitude="coordinate.lat" :longitude="coordinate.lng":m
·
之前用到加载多边形,通过缩放,拖动会产生范围的变化,需要重新加载当前视窗的多边形
地图加载
<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方法,其他环境还没试过。
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献1条内容
所有评论(0)