项目基于vue，需要做一个景区手绘地图（卡通diy地图）

Question

这个是网上找的图，我们的图也是这种。
需求就是
景区会提供地图的图片，地图上的景区点每一个地点对应一个坐标点（坐标点要操作的），点击坐标点进入到浏览点详情页面，页面上面加上筛选，搜索景点，然后这个地图要能放大缩小的。
这个坐标点是运营在后台添加的，后台直接上传图片，选择坐标，目前是构想保存x、y传到用户端，然后展示在用户端。

不知道有什么好的实现方法没有，我cannvas也不是很熟，网上查的说canvas可以，然后我看百度地图这种api（智能景区）还要申请。

求指点！！

Answer 1

做过一个类似的 背景是底图 坐标点x,y 绝对定位到底图上, 放大缩小用transform:scale()

Answer 2

使用轻量的leaflet加载这个底图，事件、标绘什么的都可以做，底图就是一张图片，坐标系设置成平面坐标也行

ImageOverlay API
无坐标系例子 底图就是一张图片

Answer 3

获取点击的坐标点，例如，pageX和pageY ，然后把接口的返回的所有点遍历一下，然后比较你点击的点有没有在坐标点里面，在的话，应该会有另外一个接口，或者上一个接口会给你其他的信息，然后打开一个弹窗或者打开一个新的页面，至于放大缩小，看楼上的

Answer 4

在底图上通过对图标元素定位实现，编辑功能使用onmousedown，onmousemove的事件来实现。做过一个类似的。