请教 V 友们一个关于图片里定位的问题，万分感谢！

[ing995683]

最近遇到个需求，想不好怎么实现，来请教下 V 友
1.不通过第三方的地图接口实现(第三方的基本上每年要收 5w 商业授权)
2.一个手绘地图 H5 页面，需要要自适应手机，pc 和电视，手机端可以像地图一样能拖动手绘地图。
3.不需要导航等地图类功能，只需类似点击手绘图片某个点可以弹出窗口显示内容即可
4.问题卡在我怎么定位到这个手绘的地图（就一张 png 图片）某个点的位置？
4.1 一开始想到的是 usemap 这个属性，但是这个属性好像不适合图片在不同尺寸终端定位
4.2 有没有专门的图标定位 js 组件可以定位图片任意点的坐标且可以适应不同屏幕下坐标一致。
4.3 是不是我思路有问题，本身不是前端。

题外话：其实腾讯地图都有现成的接口，如果用腾讯地图，是收开发费用我看算商业使用。腾讯是如何认定的，如果本身应用是公益展示性质的话？

[Eiden]

找个可以自定义地图瓦片的 js 地图库就行了吧, 随便搜了个 https://leafletjs.com/examples/crs-simple/crs-simple.html

[ing995683]

@Eiden 提供的图片只是一个普通的 png 图片，不是地图。其实问题可能换成怎么在一张图标上的某个点定位，并不会随着屏幕尺寸变化而变化位置

[dcdlove]

可以使用高德地图图片图层 支持把 png 覆盖到地区区域上
https://lbs.amap.com/demo/javascript-api-v2/example/selflayer/imagelayer
，mapbox 也可以

[isSamle]

图片内部定位？为啥不读图片尺寸按百分比划分坐标

[gwbw]

前一阵站里有人问过类似的，看能不能借鉴下这个 https://www.catl.com/

[Belmode]

@gwbw #5 我也想到这个案例，哈哈

[poisedflw]

需求很简单的，用 leaflet 自带的图层。把你需要的区域测绘一些边界点的坐标；用这些坐标数据画一个多边形（ L.polygon ），然后用 L.imageOverlay 覆盖在这个多边形上面即可。

[Zzz45]

使用 Leaflet 地图绘画应该是可以打印图层信息的

[ScoutWang]

https://sicnupic.hasno.fun/ 是这个意思吗？

[KisekiRemi]

leaflet 这个库适合你 https://github.com/Leaflet/Leaflet