uni-app打包小程序使用地图标点优化

---

前言

使用小程序地图加载大批量的数据点会出现卡顿而且手机屏幕也是比较小 全部加载不仅体验不好而且数据点也没有办法全部观看 所以就想着优化一下 以当前的屏幕中心点为地图的中心加载附近的数据点

一、实现效果

二、代码实现

代码如下（示例）：

<template>
	<view style="width: 100%;height: 100%;">
		<map id="map" style="width: 100%;height: 100%;" @regionchange="mapchangeTap" :markers="markers" :circles="circles"></map>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				circles: [],
				markers: [],
				title: '13233',
				id: 1,
			}
		},
		methods: {
			mapchangeTap(e) {
				if(e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')) {
					this.circles.splice(0)
					this.markers.splice(0)
					this.id++
					let map = uni.createMapContext("map",this)
					map.getCenterLocation({
						success: (res)=> {
							this.markers.push({
								id: this.id,
								latitude: res.latitude,
								longitude: res.longitude,
								label:123
							})
							this.circles.push({
							  latitude: res.latitude,
							  longitude: res.longitude,
							  color: '#FF0000DD',
							  fillColor: '#d1edff88',
							  radius: 100,//定位点半径
							  strokeWidth: 1
							})
						}
					})
				}
				
				
			}
		}
	}
</script>
<style>
page {
	height: 100%;
}
</style>

参考的帖子(https://blog.csdn.net/u010481239/article/details/83280946)