JavaScript의 이미지에 마커를 추가 하시겠습니까?

Question

누구든지 내가 JavaScript의 이미지 (지도가 아닌)에 마커를 추가 할 수있는 방법을 알고 있습니까?

이상적으로는 맵에 마커를 추가하는 것과 매우 유사한 핸들러를 원합니다. 즉, 클릭이 클릭 한 지점에서 마커를 표시하고 클릭 한 지점의 x/y 픽셀 좌표를 반환합니다.

이게 가능해?

건배 리차드

Answer 1

예, 가능합니다.

JavaScript만으로는 완전히 가능하지만, 나는 같은 종류의 라이브러리를 사용할 것입니다. jQuery.

접근 방식은 마커와 IMG 요소를 갖는 것입니다. 딸깍 하는 소리-"지도"로 사용하려는 이미지에 핸드러링 움직입니다 요소가 클릭 한 위치에 마커.

테스트되지 않은 예는 다음과 같습니다.

<img src="marker.png" id="marker" style="display: none; position: absolute;" />
<img src="map.png" id="map" />

<script type="text/javascript">
$('#map').click(function(e)
{
   $('#marker').css('left', e.pageX).css('top', e.pageY).show();
   // Position of the marker is now e.pageX, e.pageY 
   // ... which corresponds to where the click was.
});
</script>

---

편집하다:그리고 이것은 물론 jQuery 없이도 완전히 가능합니다. 아래는 그 것의 코드 예입니다.

<img src="marker.png" id="marker" style="display: none; position: absolute;" />
<img src="map.png" id="map" />

<script type="text/javascript">
document.getElementById('map').onclick = function(e)
{
   with(document.getElementById('marker'))
   {
        style.left = e.pageX;
        style.top = e.pageY;
        style.display = 'block';
   }
   // Here you forward the coordinates e.pageX, e.pageY 
   // ... to whatever function that needs it
};
</script>