传单图像叠加按像素坐标添加标记

Question

如何使用图像像素坐标将标记添加到传单地图图像叠加层。

我需要通过提及 x,y 像素点，通过图像的实际像素 xy 坐标将标记放置到地图中

查看此 Fiddle 链接了解更多信息。

var osmUrl = 'path/to/custom/image',
  h = 709,
  w = 709;

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

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

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]];


var marker = L.marker(map.layerPointToLatLng(map.containerPointToLayerPoint([185, 362])));
marker.addTo(map);

<div id="mapid" style="width:500px;height:400px;></div>

Answer 1

答案是肯定的。你的地图中心错了。轴原点在左上角。

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

检查that fiddle 和that other one。