JavaScriptで画像にマーカーを追加しますか?
-
06-07-2019 - |
質問
JavaScriptでマーカー(地図ではなく)にマーカーを追加する方法を知っていますか?
理想的には、マーカーをマップに追加するような動作をするハンドラが必要です。つまり、onclickにより、クリックされたポイントにマーカーが表示され、クリックされたポイントのx / yピクセル座標が返されます。 。
これは可能ですか?
乾杯 リチャード
解決
はい、可能です。
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>
所属していません StackOverflow