Javascript 使用传单在图像上创建覆盖

我试图让传单为标准的非地图图像工作，这样我就可以使用像素，而不是地理纬度和纵向坐标在图像上放置标记

这里有一把小提琴，我正试着去做：

var map=L.map（'map'{
最大缩放：4，
minZoom:2，
crs:L.crs.Simple
}).setView（[0,50]，4）；
var西南=map.unproject（[04000]，map.getMaxZoom（））；
var northEast=map.unproject（[1500,0]，map.getMaxZoom（））；
地图setMaxBounds（新L.LatLngBounds（西南、东北））；
//实际图像尺寸：1500 x 2000
var imageUrl=https://i.imgur.com/bXA34EQ.jpg';
var southWestSize=map.unproject（[02000]，map.getMaxZoom（））；
var northEastSize=map.unproject（[1500,0]，map.getMaxZoom（））；
L.imageOverlay（imageUrl，新的L.LatLngBounds（西南尺寸，东北尺寸））.addTo（地图）；
函数onMapClick（e）{
弹出窗口
.setLatLng（即latlng）
.setContent（“您在“+e.latlng.toString（）处单击了地图”）
.openOn（地图）；
}
map.on（'click'，onmaclick）；
L.marker（map.unproject（[800300]））.addTo（map.bindpoppup（“我是一只狗！
我是一个弹出窗口。
”）.openPopup（）；

我在几个层面上挣扎：

我不明白如何为图片设置适当的视图。传单需要什么

我不知道如何获得图像的横向/纵向坐标

我不知道如何控制图像在屏幕上的位置，也不知道它的大小，这样它就不会出现损坏

对于那些处于类似情况的人，我从以下来源获得了部分帮助：

---

我使用了一种更简单的方法来显示带有传单的大图像，然后在单击图像时包含一个显示坐标的函数。 选择关注点，单击，然后将坐标复制到标记的代码中

下面的代码说明了要点。 我还写了一篇教程

使用传单显示带有图标的图像
使用传单显示带有图标的图像
//使用传单.js平移和缩放大图像。
var map=L.map（'image-map'{
minZoom:1，
最大缩放：4，
中间：[0,0]，
缩放：1，
最大边界粘度：1，
crs:L.crs.Simple
});
//缩放4全尺寸图像为4608px*3456px
//缩放3 2304*1728
//变焦2 1152*864
//缩放1576*432
var image=L.imageOverlay（“https://peter-thomson.com/images/Dolomites%202016%20Peter%20A/960/P1050579.JPG", [
[0, 0],
[432, 576]
]); //初始大小（缩放0时，大小加倍，缩放1时）
image.addTo（map）；
//告诉传单，地图和图片一样大
map.setMaxBounds（新的L.LatLngBounds（[0,0]，[432576]）；//防止在图像区域外平移
L.Tillelayer（“”{
属性：“©；”
}).addTo（地图）；
//注意-添加标记坐标后不要更改边界
var popup=L.popup（）；
函数onMapClick（e）{
弹出窗口
.setLatLng（即latlng）
.setContent（“您在“+e.latlng.toString（）处单击了地图”）
.openOn（地图）；
}
map.on（'click'，onmaclick）；
var DownIcon=L.Icon.extend({
选项：{
图标大小：[40,40]，//图标的大小
iconAnchor:[20,40]，//将对应于标记位置的图标点
popupAnchor:[0，0]//相对于iconAnchor打开弹出窗口的点
}
});
var downblueIcon=新DownIcon({
伊克努尔：'https://peter-thomson.com/appdevelopmenttutorials/leaflet-map/down-blue-icon.png'
}),
downyellowIcon=新的DownIcon({
伊克努尔：'https://peter-thomson.com/appdevelopmenttutorials/leaflet-map/down-yellow-icon.png'
});
mark1=L.marker（[247.433334312.5]{
图标：向下黄色图标
}).bindPopup（L.popup({
最大宽度：500
}).setContent（“杜伦山口：步行的远点。山口顶部左侧有一条山脊路径”）.addTo（地图）；
mark2=L.marker（[203.933334364.5]{
图标：downblueIcon
}).bindPopup（L.popup({
最大宽度：500
}).setContent（“我们沿着这条路径”））.addTo（map）；

hey LetsgetStyly，你找到解决方案了吗？谢谢

<div id="map" style="width: 1500px; height: 2316px"></div>

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script>

     var map = L.map('map', {
        maxZoom: 4,
        minZoom: 2,
        crs: L.CRS.Simple
     }).setView([0,50], 4);

    var southWest = map.unproject([0, 4000], map.getMaxZoom());
    var northEast = map.unproject([1500, 0], map.getMaxZoom());
    map.setMaxBounds(new L.LatLngBounds(southWest, northEast));


    //actual image dimensions: 1500 x 2000
    var imageUrl = 'https://i.imgur.com/bXA34EQ.jpg';

    var southWestSize = map.unproject([0, 2000], map.getMaxZoom());
    var northEastSize = map.unproject([1500, 0], map.getMaxZoom());
    L.imageOverlay(imageUrl, new L.LatLngBounds(southWestSize, northEastSize)).addTo(map);

    function onMapClick(e) {
        popup
            .setLatLng(e.latlng)
            .setContent("You clicked the map at " + e.latlng.toString())
            .openOn(map);
    }
    map.on('click', onMapClick);

    L.marker(map.unproject([800, 300])).addTo(map).bindPopup("<b>I'm a dog!</b><br />I am a popup.<br /> ").openPopup();


</script>