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] // 设置可见级别，[最小级别，最大级别]})// 创建一个 Iconvar 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 ==================//
补充一句: 公网地址在发布正式版本中，需要去微信管理平台补充公网域名作为业务地址才行，不然那会出现网页非法不能查看的情况。