uniapp地图手动控制地图scale

前言

• 首次使用uniapp开发地图过程中，发现uniapp地图居然没有提供手动控制地图scale的方法，这个也着实没有想到，查了半天资料，也终于找到一个方法能够比较好的控制scale，做个记录。

代码

• 要定义一个地图map，还有要绑定scale

<template>
	<map id="map" :scale="mapScale" :longitude="longitude" :latitude="latitude">map>
template>

<script>
	export default {
		data() {
			return {
				mapScale: 16,
				longitude: '',
				latitude: '',
			}
		}
	}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

• 首先使用uni.createMapContext创建并返回 map 上下文 mapContext 对象。

mounted() {
	this._mapContext = uni.createMapContext("map", this);
}
1
2
3

• 定义方法来控制手动控制scale

methods: {
	/**
	 * 
	 * @param {*} e - 坐标等信息
	 * @param {Number} val - scale级别
	 */
	async setMapScale(e, val) {
		let setScale = () => {
			return new Promise((resolve, reject) => {
				this._mapContext.getScale({
					success: r => {
						this.mapScale = r.scale;
						resolve()
					}
				})
			})
		};
		await setScale();
		this._mapContext.moveToLocation({
			longitude: e.projectLon,
			latitude: e.projectLat,
			success: (res) => {
				//这里加300ms的延时是为了防止和moveToLocation功能冲突，保留地图移动的动画
				const timer = setTimeout(() => {
					this.longitude = e.longitude;
					this.latitude = e.latitude;
					this.mapScale = val;
					clearTimeout(timer);
				}, 500);
			},
		})
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

• 然后就可以调用这个方式来实现手动控制地图scale了
• 好，就这事，散会