Leaflet Image Overlay Marker脱臼响应式设计

Question

当我们尝试在响应式设计中放置标记时，标记会脱臼。

请尝试以下代码，在下面的评论中添加小提琴链接以供参考。

var osmUrl= 'http://skolavefurinn.is/sites/default/files/styles/quiz_hotspot/public/image_520470007.png',
h = 709,
w = 709;

var map = L.map('mapid', {
    minZoom: -3,
    maxZoom: 1,
    center: [0, -709],
    zoom: 1,
    crs: L.CRS.Simple
});

var southWest =  map.unproject([0, h], map.getZoom());
var northEast = map.unproject([w, 0], map.getZoom());
var bounds = new L.LatLngBounds(southWest, northEast);

var imgOv = L.imageOverlay(osmUrl, bounds).addTo(map);
map.setMaxBounds(bounds);
var markerData = [[0,0],[185,362],[277,593],[307,354],[472,472],[473,568],[550,516],[535,370],[230,119]];

for (var i=0; i<markerData.length; i++){
L.marker(
map.layerPointToLatLng(
    map.containerPointToLayerPoint(
    markerData[i]
  )
)
).addTo(map);
}