javascript - javascriptで画像にマーカーを追加しますか?

Question

Javascript で (地図ではなく) 画像にマーカーを追加する方法を知っている人はいますか?

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

これは可能ですか？

乾杯リチャード

Answer 1

はい、可能です。

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

アプローチは、マーカー付きの img-elementを使用し、要素がクリックされた場所にマーカーを移動する「マップ」として使用する画像にclickハンドラーを追加することです。

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

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