使用地图组件加载500个marker数据，安卓机卡顿问题如何解决？
场景：往地图中加载500个点位，并通过regionchange监听地图scale的改变，实现marker随地图的放大而放大 结果： iOS很丝滑。安卓卡顿，频繁进行缩放操作会死机 <map
class="map"
id="mapId"
:scale="scale"
:longitude="center.longitude"
:latitude="center.latitude"
:rotate="rotate"
:enable-rotate="true"
:enable-poi="poi"
:enable-building="building"
:enable-scroll="scroll"
:enable-overlooking="overlooking"
:polygons="polygons"
:polyline="polyline"
:markers="markers"
@tap="handleMapTap"
@regionchange="regionchange"
>
</map>
//hasCarList = [...] // 500条数据
//data
scaleMap: {
16: [5, 10],
17: [8, 16],
18: [12, 25],
19: [18, 37],
20: [25, 50]
}
// script
regionchange: debounce(function ({ type, detail, causedBy }) {
const that = this
if (!['scale'].includes(causedBy)) return
if (type === 'end') {
let scale = detail.scale
// const scaleRatio = setScaleRatio(scale)
// console.log(scale)
that.addCarOverLayer({ scale, rotate: detail.rotate })
}
}, 300),
// script
addCarOverLayer ({ rotate = 0, scale = ORIGIN_SCALE }) {
const that = this
// that.isAddCarOverlay = true
let _width = 5// scaleRatio > 0 ? 5 * scaleRatio : Math.abs(scaleRatio / 5)
let _height = 10// scaleRatio > 0 ? 10 * scaleRatio : Math.abs(scaleRatio / 10)
if (scale < 17) {
_width = that.scaleMap[16][0]
_height = that.scaleMap[16][1]
} else if (scale > 17 && scale < 18) {
_width = that.scaleMap[17][0]
_height = that.scaleMap[17][1]
} else if (scale > 18 && scale < 19) {
_width = that.scaleMap[18][0]
_height = that.scaleMap[18][1]
} else if (scale > 19 && scale < 20) {
_width = that.scaleMap[19][0]
_height = that.scaleMap[19][1]
} else if (scale === 20) {
_width = that.scaleMap[20][0]
_height = that.scaleMap[20][1]
}
// console.log(_width, _height)
// if (_width < 1) {
// _width = parseInt(_width)
// _height = parseInt(_height)
// }
// let _data = storeMarkers?.filter(item => item.platenumber) || []
const _data = hasCarList.map((item) => ({
longitude: item.longitude,
latitude: item.latitude,
iconPath: item.iconPath,
width: _width,
height: _height,
rotate: rotate + item.rotate,
id: item.id,
anchor: { x: 0.5, y: 0.5 }
}))
_data.length && that.mapContext.addMarkers({
markers: _data
})
// that.splitBatch(_data)
},
