前言
- 首次使用uniapp开发地图过程中,发现uniapp地图居然没有提供手动控制地图scale的方法,这个也着实没有想到,查了半天资料,也终于找到一个方法能够比较好的控制scale,做个记录。
代码
html
复制代码
<template>
<map id="map" :scale="mapScale" :longitude="longitude" :latitude="latitude"></map>
</template>
<script>
export default {
data() {
return {
mapScale: 16,
longitude: '',
latitude: '',
}
}
}
</script>
- 首先使用
uni.createMapContext
创建并返回 map 上下文 mapContext 对象。
js
复制代码
mounted() {
this._mapContext = uni.createMapContext("map", this);
}
js
复制代码
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);
},
})
}
}
- 然后就可以调用这个方式来实现手动控制地图scale了
- 好,就这事,散会