<map id="map" class="map" :scale="4" @regionchange="regionchange" :show-location="true" :latitude="latitude"
:longitude="longitude" >
</map>
// 缩放 || 移动
async regionchange(e) {
// 获取缩放等级
if(!e) return
if(e.type == 'end'){
let map = uni.createMapContext('map');
console.log(e)
map.getScale({
success: (res) => {
this.scale = res.scale
this.getZoom(res.scale)
},
fail: (data, code) => {
console.log('fail');
}
})
}
},
// 根据不同的缩放比例显示不同的数据
async getZoom(zoom){
if (zoom <= 7) { // 省
this.provinceZoom()
} else if (zoom <= 9) { // 市
this.cityZoom()
} else if (zoom <= 12) { // 区
} else if (zoom <= 14) { // 打点
}
},
// 城市
cityZoom(){
this.city_position = this.city_map_data.map((item, index) => {
return {
longitude: Number(item.center[0]),
latitude: Number(item.center[1]),
city_name: item.city_name,
total: item.total,
warn_list: item.warn_list,
id: index + 1,
label: {
padding: 4,
bgColor: '#3a7eff',
color: '#ffffff',
content: item.city_name + '\n' + item.total
}
}
})
const markers = []
this.city_position.forEach((item, index) => {
const newMarker = Object.assign({}, ...this.marker, item)
markers.push(newMarker)
})
console.log(markers)
this._mapContext.addMarkers({
markers,
clear: false,
complete(res) {
console.log('addMarkers', res)
}
})
},
// 省份
provinceZoom(){
this.province_position = this.province_map_data.map((item, index) => {
return {
longitude: Number(item.center[0]),
latitude: Number(item.center[1]),
province_name: item.province_name,
total: item.total,
warn_list: item.warn_list,
id: index + 1,
label: {
padding: 4,
bgColor: '#3a7eff',
color: '#ffffff',
content: item.province_name + '\n' + item.total
}
}
})
const markers = []
this.province_position.forEach((item, index) => {
const newMarker = Object.assign({}, ...this.marker, item)
markers.push(newMarker)
})
this.addMarkers(markers)
},
addMarkers(markers) {
this._mapContext.addMarkers({
markers,
clear: false,
complete(res) {
console.log('addMarkers', res)
}
})
},
0 个回复