uniapp /微信小程序使用map组件实现手绘地图方案

he_wen_jian

已于 2024-02-27 17:57:35 修改

阅读量3.2k

点赞数 15

文章标签： uni-app

于 2024-02-04 12:39:06 首次发布

本文链接：https://blog.csdn.net/he_wen_jian/article/details/136023612

版权

本文介绍了如何在Uniapp小程序中获取地图范围，通过点图拾取坐标并添加地面覆盖物展示手绘地图。特别提到解决大文件素材问题的方法，即裁剪成瓦片并进行拼接。作者背景是多端开发专家，兼职开发者。

摘要由CSDN通过智能技术生成

获取地图范围

点图拾取坐标-地图开放平台|腾讯位置服务

获取需要手绘地图左下角和右上角GPS坐标

以北京故宫为例：

截取需要手绘地图进行手绘地图制作

素材处理

由于地图素材文件比较大，小程序又限制包大小<=2M,无法存放本地，所以素材只能存放云端

代码逻辑

this._mapContext = uni.createMapContext("map", this);//map为map组件id

this._mapContext.addGroundOverlay({
					id: 11,
					src: `xxx.png`,//手绘地图素材路径
					bounds: {
						southwest: {//左下角GPS
							longitude: southwest[1],
							latitude: southwest[0]
						},
						northeast: {//右上角GPS
							longitude: northeast[1],
							latitude: northeast[0]
						}
					},
					visiable: true,
					zIndex: 1000,
					success: () => {
						console.log("显示成功", southwest, northeast)
					},
					fail: (e) => {
						console.log("显示失败", e)
					}
				})