자바 스크립트에서 이미지에 마커를 추가 하시겠습니까?

Question

누구나 Javascript의 이미지가 아닌 (지도가 아닌) 마커를 추가 할 수 있습니다.

이상적으로지도에 마커를 추가하는 것과 비슷하게 작동하는 핸들러가 필요합니다. 예를 들어 onclick은 클릭 한 지점에 표식을 표시하고 x/y 픽셀 좌표를 반환합니다. 클릭 함.

이것이 가능합니까?

건배 리처드

Answer 1

네, 가능합니다.

그냥 자바 스크립트로 할 수 있지만, JQuery과 같은 라이브러리를 사용합니다.

마커에 img-element가있는 것입니다. 그러면 click -handler를 "maps"로 사용할 이미지에 추가하면됩니다. moves 마커가 클릭 된 위치로 마커가 나타납니다.

이

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