uniapp开发小程序地图应用时，scale 缩放地图有一个小坑

一句话总结

地图的缩放，会依据地图设置的 longitude latitude 位置缩放，不会根据地图当前视野位置。所以需要在地图视野变化后，动态调整 longitude latitude 坐标。

详细说明下

1. 刚开始是写的这样的代码

<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 300px;" :scale="mapScale" :latitude="latitude" :longitude="longitude">
				</map>
			</view>
                        <view>
				<uni-icons type="eye" size="35" @click="mapSize('large')"></uni-icons>
				<uni-icons type="eye" size="35"  @click="mapSize('small')"></uni-icons>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			id:0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 39.909,
			longitude: 116.39742,
                        mapScale: 16,
		}
	},
	methods: {
            mapSize(type: 'large' | 'small') {
			if (type === 'large') this.mapScale = this.mapScale + 1 > 20 ? 20 : this.mapScale + 1;
			if (type === 'small') this.mapScale = this.mapScale - 1 < 3 ? 3 : this.mapScale - 1;
		}
	}
}
</script>

在调试工具中，缩放没问题，并且移动视野后，缩放效果也符合预期。

但在真机调试上，发现缩放一直基于给定坐标。

2. 调整代码

<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map id="map" class="map" style="width: 100%; height: 300px;" :scale="mapScale" :latitude="latitude" :longitude="longitude" @regionchange="onViewChange"> // <------ 这里增加上 regionchange 事件处理中心坐标的变更
				</map>
			</view>
                        <view>
				<uni-icons type="eye" size="35" @click="mapSize('large')"></uni-icons>
				<uni-icons type="eye" size="35"  @click="mapSize('small')"></uni-icons>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			id:0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 39.909,
			longitude: 116.39742,
                        mapScale: 16,
                        _mapContext: {},
		}
	},
        onReady() {
            this._mapContext = uni.createMapContext('map', this);
        },
	methods: {
            mapSize(type: 'large' | 'small') {
			if (type === 'large') this.mapScale = this.mapScale + 1 > 20 ? 20 : this.mapScale + 1;
			if (type === 'small') this.mapScale = this.mapScale - 1 < 3 ? 3 : this.mapScale - 1;
		},
                // 地图视野变化
		onViewChange() {
			this._mapContext.getCenterLocation({
				success: e => {
					this.latitude = e.longitude; // 中心经度
					this.latitude = e.latitude; // 中心纬度
				}
			});
		},
	}
}
</script>

增加上 regionchange 视野变化的事件处理，动态变化定位点，然后缩放效果就没问题了。

最后

希望对你有帮助。有帮到你的话，请给我一键三连加油，谢谢~