JavaScriptで画像にマーカーを追加しますか？

Question

JavaScriptでマーカー（地図ではなく）にマーカーを追加する方法を知っていますか？

理想的には、マーカーをマップに追加するような動作をするハンドラが必要です。つまり、onclickにより、クリックされたポイントにマーカーが表示され、クリックされたポイントのx / yピクセル座標が返されます。 。

これは可能ですか？

乾杯 リチャード

Answer 1

はい、可能です。

javascriptだけで完全に実行可能ですが、 JQuery のようなライブラリを使用します。

アプローチは、マーカーのあるimg要素を持ち、クリック -handlerを「マップ」として使用する画像に追加します。どのマーカーを要素がクリックされた場所に移動します。

テストされていない例を次に示します。

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