uni-app地图手绘图覆盖方案：打造智慧景区小程序的完美解决方案-七爪网

uni-app地图手绘图覆盖方案：打造智慧景区小程序的完美解决方案

原本以为只需在地图上特定区域添加一张覆盖图就轻松简单，但实际在小程序操作中遇到了不少难题，整个探索过程充满了限制和挑战。

探索之旅的开端

一开始以为在小程序地图上添加图片很容易。心想按照常规方法，直接在指定地方覆盖图片即可。然而实际操作时，发现并非如想象中那么简单。头脑中涌现出各种设想，以为能迅速解决问题。当时身处办公室，坐在电脑前，信心十足地动手，但现实却给了沉重打击。

很快便察觉到这是个小程序，众多常规设想难以实施。例如，简单地对图片进行覆盖，小程序的原始方法根本无法做到，这才深刻认识到问题的严重性。

百度摸索无果

我开始在百度上寻找解决之道，内心满怀希望，相信网上定有可行方案。查阅了众多资料，试验了多次。耗费了数小时，从早晨到午后，不断变换思路，然而结果始终未能如愿。这些资料要么不适合小程序，要么在使用过程中出现了各种问题。

这才发现，这个区域属于微信自家的服务，并未对外公开。若要开放，似乎需走特殊渠道，可能得通过付费这种方式，但这显然与我们的要求不符。

寻求其他方法

摸索百度的过程未能成功，于是我开始尝试其他途径。当时心情颇为低落，但内心深处并不愿意就此放弃。想了许多办法，每种方法在心中都仿佛是一颗发芽的希望。比如，我尝试调整小程序的底层代码，希望通过巧妙地组合来达成那个看似简单的功能。

我咨询了业内同仁以及社区中的开发者。其中一位开发者透露，他之前也遭遇过类似难题，但最终选择了放弃。这番话让我更加坚信，绝不能轻言放弃，必须持续探索解决问题的方法。

web-view嵌套的想法诞生

后来我琢磨出了利用web-view嵌套的技巧。这灵感是突然冒出来的，那时候正好吃完晚饭，坐在沙发上歇息，突然就闪现了这个想法。我觉得这办法或许能派上用场。于是我就动手在高德地图上进行了试验，结果发现高德地图里的自定义地图功能有很大的发展空间。

在此过程中，我们对高德地图的各项功能进行了深入探究。发现高德地图的定制功能完全依赖于代码块，这与小程序采用的基于标签的编写方式截然不同。为了掌握这种新的编写方法，我花费了两天时间来逐步熟悉并理解这一全新的操作思路。

<template>
	<div style="width: 100vw;height: 100vh;">
		<div id="map"  style="width: 100vw;height: 100vh;position: absolute;"></div>
	</div>
</template>

制作demo共享

发现许多类似模板都不免费提供，这让人感到非常恼火。因此，我决定亲手制作一个演示版并公之于众。那时，我觉得自己不仅是在解决个人问题，还在帮助更多需要帮助的人。在制作演示版的过程中，我也遇到了一些小挑战，比如如何保证它在不同设备上都能正常使用等问题。

经过多次测试与调整，最终我们成功制作出了一个可用的演示版本。这个版本专为那些在微信开发者文档中寻找答案却未能找到分享的人所设计。

import AMap from '../../utils/utils.js'

高德地图的引入和使用

要用这种方法，先得把高德地图引进来。得去高德开发平台注册一个账号，这个过程并不繁琐。在公司网络畅通的时候，登录高德控制台，创建一个应用，选择网页API，也就是Web端，就能获得key。这个过程可以参照博主小傲哥哥的方法来操作。

data() {
			return {
				title:'hello',
				provider:'',
				map: null,
				zoom:15,
				resAmap:null,
				scrollH:500,
				scrollW:500,
				initLat:38.913423,//初始维度
				initLng:116.368904,//初始经度
				covers:[],
				LlayAroundGroupOpen:true,  //l网周边
			}
		}