Javascript 传单.js ImageOverlay缩放更改标记位置

我使用ImageOverlay将图像用作地图，使用loaple.js-但是当更改缩放时，标记会更改位置

在本文中遵循了指南，下面是一个代码笔示例

//标记
var markers=[{“标题”：“OneOcean Port Vell”，“描述”：“超级游艇码头”，“链接”：“http:\/\/www.oneoceanportvell.com\/”，“x”：“68.28125”，“y”：“68.443002780352178”}]；
var map=L.map（'image-map'{
minZoom:2，
最大缩放：4，
中间：[0,0]，
缩放：2，
属性控制：false，
最大边界粘度：1.0，
crs:L.crs.Simple
});
//图像的尺寸
var w=3840，
h=2159，
url='map.png'；
//在坐标空间中计算图像的边缘
var西南=map.unproject（[0，h]，map.getMaxZoom（）-1）；
var northEast=map.unproject（[w，0]，map.getMaxZoom（）-1）；
var bounds=新的L.LatLngBounds（西南、东北）；
//添加图像覆盖，
//这样它就覆盖了整个地图
L.imageOverlay（url，bounds）.addTo（map）；
//告诉传单，地图和图片一样大
map.setMaxBounds（bounds）；
//添加标记
对于（var i=0；i

在代码笔中，将

zoom

更改为4以查看标记丢失位置

理想情况下，我会尝试更改缩放，以允许不同的屏幕大小，并在移动设备上看到更多的地图

也可能是相关的，我看不出如何让该功能工作以允许分数缩放

任何指针都非常有用

需要要应用取消投影的

缩放

值

在计算

边界

和

中心

时，您正确地将静态

图像缩放

值指定为

取消投影

，但不指定标记位置

如果未指定

zoom

参数，则

unproject

使用当前地图缩放级别，即您在

zoom

变量中定义的缩放级别。这就是为什么当您更改其值时，

unproject

为您的标记使用不同的值，并且它们位于不同的位置

您甚至必须将

x

和

y

值（相对于图像）除以2，以说明在初始情况下，它们对于

imageZoom

为4是正确的，但由于您没有指定

取消投影的缩放，后者使用当前的
缩放
（即3），所以坐标应该除以2才是“正确的”

更新的代码笔：
您知道，您应该提供足够的代码，以便在问题正文中添加一个简单的示例，而不仅仅是依靠外部服务。如果您需要有关
zoomSnap
的帮助，请打开一个新问题。@ghybs抱歉-已编辑该问题以添加一个简单的示例。@ghybs-感谢您的帮助，让zoomSnap工作-只需要zoomDelta，缩放控件也可以是分数。
// Markers 
var markers = [{"title":"OneOcean Port Vell","description":"Super yacht marina","link":"http:\/\/www.oneoceanportvell.com\/","x":"68.28125","y":"68.443002780352178"}]; 

var map = L.map('image-map', {
  minZoom: 2,
  maxZoom: 4,
  center: [0, 0],
  zoom: 2,
  attributionControl: false,
  maxBoundsViscosity: 1.0,
  crs: L.CRS.Simple
});

// dimensions of the image
var w = 3840,
    h = 2159,
    url = 'map.png';

// calculate the edges of the image, in coordinate space
var southWest = map.unproject([0, h], map.getMaxZoom()-1);
var northEast = map.unproject([w, 0], map.getMaxZoom()-1);
var bounds = new L.LatLngBounds(southWest, northEast);

// add the image overlay, 
// so that it covers the entire map
L.imageOverlay(url, bounds).addTo(map);

// tell leaflet that the map is exactly as big as the image
map.setMaxBounds(bounds);

// Add Markers  
for (var i = 0; i < markers.length; i++){
    var marker = markers[i];

    // Convert Percentage position to point
    x = (marker['x']/100)*w;
    y = (marker['y']/100)*h;

    point = L.point((x / 2), (y / 2))
    latlng = map.unproject(point);

    L.marker(latlng).addTo(map);
}