uniapp地图手动控制地图scale

前言

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

代码

  • 要定义一个地图map,还有要绑定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);
}
  • 定义方法来控制手动控制scale
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了
  • 好,就这事,散会
相关推荐
菜鸟una1 小时前
【微信小程序 + map组件】自定义地图气泡?原生气泡?如何抉择?
前端·vue.js·程序人生·微信小程序·小程序·typescript
昔人'3 小时前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html
岁月宁静8 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
2501_915909069 小时前
“绑定 HTTPS” 的工程全流程 从证书配置到真机验证与故障排查
网络协议·http·ios·小程序·https·uni-app·iphone
心易行者9 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~9 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge9 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再9 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴9 小时前
Lua 模块的完整入门指南
前端·lua
2501_9159184110 小时前
iOS 混淆实战 多工具组合完成 IPA 混淆、加固与工程化落地(iOS混淆|IPA加固|无源码混淆|Ipa Guard|Swift Shield)
android·ios·小程序·https·uni-app·iphone·webview