este es nuestro código, pero este código me da las coordenadas de acuerdo con el cuerpo relativo, pero cuando cambio el zoom, me da diferentes valores. Quiero obtener las coordenadas y guardarlas en mi backend que no se puede cambiar. Este es mi código.

 function FindPosition(oElement) { console.log(oElement); console.log(oElement.pageX); if (typeof (oElement.offsetParent) != "undefined") { for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) { posX += oElement.offsetLeft; posY += oElement.offsetTop; } return [posX, posY]; } else { return [oElement.x, oElement.y]; } } function GetCoordinates(e) { var PosX = 0; var PosY = 0; var ImgPos; ImgPos = FindPosition(myImg.current); // console.log(document.documentElement.scrollTop); console.log(myImg); if (!e) { var e = window.event }; if (e.pageX || e.pageY) { PosX = e.pageX; PosY = e.pageY; } else if (e.clientX || e.clientY) { PosX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; PosY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } PosX = PosX - ImgPos[0]; PosY = PosY - ImgPos[1]; }

aquí está jsx que está escrito en reaccionar js

 <div className="map" ref={"Here is map image"} onMouseDown={GetCoordinates}> <img className='mapImage' src={map} alt="" /> <RoomIcon className="markerIcon" /> </div>

este es el codigo css

 .map { /* height: 100px; */ text-align: center; margin: auto; /* overflow: scroll; */ margin-top: 18px; position: relative; } .mapForm .map img { margin-top: 18px; /* width: ; */ /* width: 1900px; */ /* zoom: 150%; */ } .mapImage { width: 600px; /* zoom: 600%; */ } .markerIcon { z-index: 5; position: absolute; color: #e24e40; left: 30px; top: 30px; }