前言
- 首次使用uniapp开发地图过程中,发现uniapp地图居然没有提供手动控制地图scale的方法,这个也着实没有想到,查了半天资料,也终于找到一个方法能够比较好的控制scale,做个记录。
代码
<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 对象。
mounted() {this._mapContext = uni.createMapContext("map", this);
}
methods: {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) => {const timer = setTimeout(() => {this.longitude = e.longitude;this.latitude = e.latitude;this.mapScale = val;clearTimeout(timer);}, 500);},})}
}
- 然后就可以调用这个方式来实现手动控制地图scale了
- 好,就这事,散会