브라우저에서 큰 이미지 표시 : 확대/축소 허용 : 클릭하면 마커 추가 및 픽셀 x/y 가져 오기

Question

내가하고 싶은 일은 상당히 일반적 일 것 같지만 어떤 플러그인도 찾을 수 없습니다.

브라우저에 큰 이미지를 표시하고 사용자가 확대 (확대/축소와 같은 UI 또는지도 뷰어와 같은)하도록 허용하고 사용자가 이미지를 클릭하고 마커를 추가 할 수있게하려고합니다. 마커는 원본 이미지의 픽셀 x/y 좌표를 반환해야합니다.

기본적으로 사용자가 이미지의 특정 픽셀 x/y 값에 태그를 지정하는 방법입니다.

이미지가 바둑판 식으로 바둑판 식으로 배열되었거나 확대/축소 컨트롤과 함께 간단한 이미지 인 경우 중요하지 않습니다. Flash보다는 jquery를 사용하고 싶지만 어느쪽에도 중요하지 않습니다.

도움을 주시면 감사하겠습니다.

감사합니다.

Answer 1

OpenLayers은지도 용으로 작성되어 타일링 된 이미지를 이동하고 확대/축소하는 데 사용할 수 있습니다. 지도를 염두에두고 만들어 졌기 때문에 사용할 수 있는지 잘 모르겠습니다.

등

Answer 2

체크 아웃 this jQuery tutorial, 마커를 추가 클릭의 좌표를 읽기위한 확장이 있습니다. 필요에 맞게 수정할 수 있습니다. 튜토리얼 당

는 :

$("#yourImageId").click(function(e){ 

    var x = e.pageX - this.offsetLeft; 
    var y = e.pageY - this.offsetTop; 

    $('#log').html(x +', '+ y); 

    //Do Something to add a push pin at these coordinates. 

}); 

: 여기 페이지보다는 특정 요소 내의 위치를 ​​찾는 일례이다