电子商务网站架构理发培训专业学校

前言

• 首次使用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>

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

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

• 定义方法来控制手动控制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);},})}
}

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