जावास्क्रिप्ट में किसी छवि में मार्कर जोड़ें?

Question

कोई भी जानता है कि मैं जावास्क्रिप्ट में किसी छवि (मानचित्र नहीं) में मार्कर कैसे जोड़ सकता हूं?

आदर्श रूप से मैं एक हैंडलर चाहता हूं जो एक मानचित्र में मार्कर जोड़ने की तरह व्यवहार करता है - यानी ऑनक्लिक उस बिंदु पर प्रदर्शित होने के लिए मार्कर का कारण बनता है, और उस बिंदु के x/y पिक्सेल निर्देशांक देता है क्लिक किया।

क्या यह संभव है?

चीयर्स रिचर्ड

Answer 1

हाँ, यह संभव है।

हालांकि यह सिर्फ जावास्क्रिप्ट के साथ पूरी तरह से करने योग्य है, लेकिन मैं JQuery जैसे किसी प्रकार की लाइब्रेरी का उपयोग करूंगा।

दृष्टिकोण आपके मार्कर के साथ एक आईएमजी-तत्व होना होगा, और फिर उस छवि को click -handler जोड़ें जिसे आप अपने "मानचित्र" के रूप में उपयोग करना चाहते हैं, 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>