需求:根据当前中心点,显示附近范围内的markers,类似于青桔找车功能

1.map代码

<map id="map" :latitude="latitude" :longitude="longitude" class="map-nvue-container" :controls="controls" :markers="markers"
		 :scale="scale" :circles="circles" @controltap="onControlHandle"  @regionchange="onRegionChange" @tap="onTap">
		</map>

2.data:

data(){
 return {
	latitude: 0,
				longitude: 0,
				latitudeLength: 85390,
				longitudeLength: 111000,
				earthRadius: 6378.137,
				scale: 16,
				getLocationStatus: false,
				windows: {
					width: windowWidth,
					height: windowHeight
				},
				controls: [{
						id: 10000, //定位
						position: {
							// left: 15,
							left: windowWidth - 56,
							top: iconLocation,
							width: 48,
							height: 48
						},
						iconPath: '/static/icon/location.png',
						clickable: true
					},
					{
						id: 10001, // 中心点
						position: {
							left: windowWidth / 2 - 16,
							top: windowHeight / 2 - 55,
							width: 24,
							height: 24
						},
						iconPath: '/static/icon/current_location.png',
						clickable: true
					}, {
						id: 10002, // 加
						position: {
							left: windowWidth - 56,
							top: windowHeight - 200,
							width: 48,
							height: 48
						},
						iconPath: '/static/icon/plus.png',
						clickable: true
					}, {
						id: 10003, // 减
						position: {
							left: windowWidth - 56,
							top: windowHeight - 140,
							width: 48,
							height: 48
						},
						iconPath: '/static/icon/sub.png',
						clickable: true
					}
				],
				oldMarkers:[{
					"id": 74,
					"latitude": 30.055428,
					"longitude": 103.834036,
					"iconPath":"/static/icon/circles.png",
					"callout": {
						"title": "时代广场",
						"content": "时代广场",
						"color":"#2E9AFE", 
						"borderRadius":10,
						"display": "ALWAYS",
						"padding":"5",
						"bgColor": "#FFFFFF"
					}
				}],
				markers:[],
				mapChangeIndex: 0,
			}
}
}

方法:

//获取站点信息
			getInit() {
				const that = this
				post('Bbs/ApiInfo/GetSiteInfo', {}).then(res => {
					that.oldMarkers = res.result
					that.getRange()
				})
			},
			//计算附近点位信息
			getRange(){
				const that = this
				let lists=[]
				for(let item=0;item<that.oldMarkers.length;item++){
					// console.log(item,that.latitude, that.longitude) 
					let isComputer = that.rangeComputer(that.latitude, that.longitude, that.oldMarkers[item].latitude, that.oldMarkers[item].longitude,0.5)
					
					if(isComputer){
						lists.push(that.oldMarkers[item])
					}
					
				}
				that.markers = lists
			},
			//中心点移动事件
			onRegionChange(e) {
				console.log(e)
				const that = this
				if (e.type == 'end') {  //在安卓中是 end 事件
					that.getCenterLatLong() 
				}else if(e.type =='regionchange'){ // 在ios中是 regionchange
					that.getCenterLatLong() 
				}
			},
			//获取中心点位置
			getCenterLatLong(){
				const that = this
				let map = uni.createMapContext('map',this);
				map.getCenterLocation({
					success: res => {
					 
						that.latitude = res.latitude
						that.longitude = res.longitude
						 
						let UserLocation =  res.longitude +','+res.latitude
						uni.setStorageSync('UserLocation', UserLocation);
						
						that.getRange()
					},
					fail: () => {
						uni.showToast({
							title: '获取定位失败',
							icon: 'none'
						});
					},
					complete: () => {
						that.getLocationStatus = false
					}
				});
			},
			/**
			 * 范围计算
			 * @param {Object} userLatitude 用户维度
			 * @param {Object} userLongitude 用户经度
			 * @param {Object} latitude 维度
			 * @param {Object} longitude 经度
			 * @param {Object} range 范围
			 */
			rangeComputer(userLatitude, userLongitude, latitude, longitude, range = 2){
				if(isNaN(range)){
					return Error("错误的距离参数")
				}
				const radUserLatitude = this.rad(userLatitude)
				const radLatitude = this.rad(latitude)
				const x = this.rad(userLongitude) - this.rad(longitude)
				const y = radUserLatitude - radLatitude
				
				if(this.distanceComputer(x,y,radUserLatitude, radLatitude) <= range){
					return true
				}else{
					return false
				}
				
			},
			/**
			 * 距离计算
			 * @param {Object} x
			 * @param {Object} y
			 */
			distanceComputer(x,y,userLatitude,latitude){
				
				const radLength = 2*Math.asin(Math.sqrt(Math.pow(Math.sin(y/2),2) + Math.cos(userLatitude)*Math.cos(latitude)*Math.pow(Math.sin(x/2),2)));
				//console.log('原始值:',radLength)
				//console.log('计算后的值:',radLength * this.earthRadius)
				return radLength * this.earthRadius
			},
			/**
			 * 根据曲率计算
			 * @param {Object} d
			 */
			rad(d)
			{
			    return d * Math.PI / 180.0;
			},
			//获取用户位置
			getUserLocation() {
				const that = this
				if (that.getLocationStatus) {
					uni.showToast({
						title: '获取定位尚未完成',
						position: 'bottom',
						icon: 'none'
					});
					return
				}
				uni.showToast({
					title: '正在获取用户定位...', //that.$lang.get(that.$lang.language.getUserLocation),
					position: 'bottom',
					icon: 'none'
				});
				that.getLocationStatus = true
				uni.getLocation({
					type: 'gcj02',
					success: res => {
				
						that.latitude = res.latitude
						that.longitude = res.longitude
						let map = uni.createMapContext('map');
						map.moveToLocation({
							longitude:res.longitude,
							latitude:res.latitude
						})
						that.getInit()
						 
					},
					fail: () => {
						uni.showToast({
							title: '获取定位失败',
							icon: 'none'
						});
					},
					complete: () => {
						that.getLocationStatus = false
					}
				});
			},