Thêm điểm đánh dấu vào một hình ảnh trong javascript?

Question

Bất cứ ai cũng biết cách tôi có thể thêm điểm đánh dấu vào hình ảnh (không phải bản đồ) trong Javascript? Lý tưởng nhất là tôi muốn một trình xử lý giống như việc thêm một điểm đánh dấu vào bản đồ - tức là onclick làm cho một điểm đánh dấu được hiển thị tại điểm được nhấp và trả về tọa độ pixel x/y của điểm đã được đánh dấu. đã nhấp.

Điều này có khả thi không?

Chúc mừng Richard

Answer 1

Có, có thể.

Mặc dù hoàn toàn có thể thực hiện được chỉ với javascript, tôi sẽ sử dụng một số loại thư viện như JQuery.

Cách tiếp cận sẽ là có phần tử img với điểm đánh dấu của bạn và sau đó thêm click -hình ảnh vào hình ảnh bạn muốn sử dụng làm "bản đồ" của mình, trong đó moves điểm đánh dấu của bạn.

Dưới đây là một ví dụ chưa được kiểm tra:

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

---

Edit: Và điều này là hoàn toàn có thể mà không JQuery quá, tất nhiên. Dưới đây là một ví dụ về mã như vậy.

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