一、效果图

先上一波效果图，手机录制

二、项目中用到的图片

呐，最近领导让俺帮某学校做一个校区平面示意图的移动端项目，用到的图片就是这样的，不过这是截的图片，放大后会模糊，项目中真正使用的图片有6m，放大后不怎么模糊，还算清晰，

三、步骤

需求：用户通过手机打开一个连接，跳转到一个新的页面，该页面只有一张图，没错，一个图就是一个移动端项目！然后用户点击该图片不同的区域，显示该区域的相关信息，比如建筑的名字等，通过弹窗展示出来！

思路：哈，我一听，这简单啊，就是给图片做些点击事件呗，点击时候把该处的内容传到弹窗，显示出来不就行了嘛，可能麻烦的就是需要一个一个的找这些方方块块的坐标，本来以为这些建筑的坐标是后端返回的，然后领导说，你想办法自己找出来吧，然后先写死，这个页面以后也不会改的，到时候把这些数据和数据的格式给后端，让后端保存了，在通过接口返回给你，我一听行吧，这样也省事啊，
然后同事给俺发了个链接，说是一般都是使用的这个找坐标的，还很快，唉，有方法就行，省的到处找了，节省了不少时间呐

1.网站链接

网站链接 https://www.image-map.net/
具体的操作步骤如下

哈哈，俺一般看到学习文档是英文时，做的第一件事，习惯性的操作都是鼠标右键——翻译中文，说实在的，当发现无法转中文时，是有点小慌的，不过，问题不大，俺的英文水平还算过得去，大概意思就是

1.点击按钮，上传本地图片到这个网页

2.选择框住的区域的形状，默认是rect（矩形，只需确定上下两个点就可以闭合，比较省事，适用于规则些的），poly（不规则，至少需要三个点才可以闭合，有些麻烦，但是圈住的区域比较精确，适用于不规则的），circle（圆圈，对于那些区域接近与圆的，很友好，找好圆心，然后拉伸另一个点，可以扩大圈的范围）
rect

poly

circle

3.使用这些坐标点，点击show me the code（展示代码）

4.在vant项目中使用

给public下的index.html定义id名，便于在home页面获取，动态修改meta的content属性，缩放的最大倍数和是否允许缩放

目前项目里面目前找的只是这一部分的坐标

项目中遇到的bug

1.页面坐标不准确。。
一开始，网站里面上传的是截图，然后几个坐标点都是截图上面找的，结果后来领导说换用清晰的图片，也就是那个6m的图，然后后面的几个坐标都是从这个6m图上面找的，很大，额，非常大，截图如下


所以是有偏差的，还很大，所以，后来找的坐标点都是选用的截图上面的，这也算是个坑吧

2.对坐标进行批量缩小

通过网站获取坐标，坐标呢是找到了，但是要用到移动端啊，所以坐标是要缩小点的，然后发现
这个网站的窗口缩小到33%时，上传的图片的宽度大致手机上的差不多，有375左右，那就批量除以3吧

 changeCroods(val){val=val.split(",");let newArr=[];for(let i=0;ival[i]=Math.floor(val[i]/3)newArr.push(val[i])}let newVal=newArr.join(",");return newVal},

3.页面拉伸放大后，弹窗不居中了。。

手机上面打开一个链接，跳到新的页面后，双指扒拉放大页面后，底部和右边会出现滚动条，弹窗也会放大，并且不居中了，很难受，找了各种办法，都没能解决，比如说，什么width和height啥的，screenTop和screenLeft啥的，定位啊，都没得用，最后和领导商量了下，页面放大后，在点击区域时，页面缩小为原来大小，再接着显示弹窗得了，我一听也行，然后就去想办法动态修改meta标签的content属性了

下面是几篇对俺很有帮助的博客，百度大法好啊，真的棒！哈哈哈

使用js还原浏览器的缩放
常用的meta标签以及作用