uni-app 地图手绘图覆盖方案，类似智慧景区小程序

前言：本以为很简单就可以解决的一样东西，就是在地图特定位置放置一个覆盖的图片就好了，实际上却是很简单，但是可惜你做的是小程序，这样子思路就会被截断。先自己摸索百度，最后发现这个版块是微信自家的服务，不对外开放，想要开放那就要问问它，最后发动是钞能力啦，这明显不符合要求。所以想过几种方法，最后使用的是web-view 嵌套高德地图的自定义地图的方法实现。

思路：

因为经过试验，所有微信方面小程序的方法，都不能满足要求，都不能实现如下效果

所以只能通过先做好一个H5的地图，通过web-view标签嵌套在小程序，这样就能达到这种效果，我这边使用的是高德地图的自定义功能，高德的都是用编程的方式，所以都是代码块，没有像小程序那种可以使用标签写的。

因为这类的模板很多都不免费分享，这让我很懊恼。索性自己做了一个demo 然后分享出来供有需要的人使用，毕竟看微信开发者文档中挺多人求，但是都没热心人去分享。

一、引入高德地图

1.到高德开发平台申请账号，在控制台创建相关的应用，这里我们使用的网页的api，也就web端，拿到key就可以了

在这里插入图片描述

这里的步骤就可以用这位博主的方法，我也是用他的方法然后跟着文档改出来的
@小傲哥哥

二、使用

上面的博主的一定要看。
标签

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

先引入js文件

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

data数据是上面博主的摘抄下来的

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网周边
			}
		}

其实就这么一段代码是有用的，要是看不懂可以直接看官方文档的图片覆盖
图层覆盖

async initAMap() {
							try {
								this.resAmap = await AMap();
								this.$nextTick(() => {
									let that = this
									// this.getBroewerLatLng();
									console.log('这是获取到的方法',this.resAmap)
									var map = new this.resAmap.Map('map', {
										center: [this.initLng, this.initLat],
										zoom: this.zoom,
										resizeEnable: true
									});
									this.map = map;
									var imageLayer = new this.resAmap.ImageLayer({
									    bounds: new this.resAmap.Bounds(		// 这是你 地图铺在哪里的地方 虚假数据请勿使用
										 [114.086041, 23.600853], //图片左下角  第一位 +的话右移 - 左移 
										 [114.099361, 23.581953], // 图片右上角
										),
									    url: 'https://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg', // 这是你覆盖在地图的图片
									    zIndex:2,
									    zooms: [3, 20] // 设置可见级别，[最小级别，最大级别]
									})
									
			
										 // 创建一个 Icon
									    var startIcon = new this.resAmap.Icon({
									        // 图标尺寸
									        size: new this.resAmap.Size(40, 40),
									        // 图标的取图地址
									        image: 'https://lbs.amap.com/demo/jsapi-v2/example/selflayer/imagelayer', 
									        // 图标所用图片大小
									        imageSize: new this.resAmap.Size(40, 40),
									     })
									    var infoWindow = new this.resAmap.InfoWindow({offset: new this.resAmap.Pixel(0, -30)});
									    // 这里的marker 就是地图上面的你显示的景点的标点，要多少个可以循环
									        var marker = new this.resAmap.Marker({
												icon:startIcon,
									            position:  [114.086041, 23.600853], // 这是定位的点
									            map: map,
									            // 这是下标显示的名字, 我这里没注意看 所以用了偏移值，其实可以只用 top 改成 bottom 应该也一样
												label: {
													direction: 'top', // 显示在标记图片的什么地方
													content: "<div class='labelContent'>"+'小青龙'+"</div>",
													offset: new this.resAmap.Pixel(0,70) // 偏移值 
												}
									        });
									        // 设置点 点击时候触发的方法
									        marker.on('click', markerClick);
									        marker.emit('click', {target: marker});
									    
											// 设置定位地点为标点的中心
									map.setFitView();
									map.add(imageLayer);
									map.on('click', this.showInfoClick); // 地图点击的方法
									console.log(this.map)
									//解析定位结果
									// var then = this;
									function onComplete(data) {
										console.log(data) // 获取到的定位信息
									}
									function markerClick(e) {
										console.log('点击到的e',e.target)
									}
									function onError(data) {
										console.log(data) // 定位失败的信息
									}
								})
							} catch (e) {
								console.log(e)
							}
						}

到了这里就完成了，只需要把这个项目部署在公网上，然后小程序直接用

 <web-view src="公网地址" style="width: 100vw;height: 100vh;"></web-view>

// ========================== 修改2021-7-6 ==================//
补充一句: 公网地址在发布正式版本中，需要去微信管理平台补充公网域名作为业务地址才行，不然那会出现网页非法不能查看的情况。
在这里插入图片描述