0

coordinates on the picture

I clicked on the HTML image to display the coordinates. I want the coordinates to appear in the NINOX number field. How can I do this? Thank you.

POINT

let t := this;
let imageUrl := "https://share.ninox.com/4m02831o55c2vmnb8fopajfdmclj22n7j1o9";
html("
<link rel='stylesheet' href='https://unpkg.com/leaflet@1.9.4/dist/leaflet.css' crossorigin='' />
<script src='https://unpkg.com/leaflet@1.9.4/dist/leaflet.js' crossorigin=''></script>

<!-- 地圖容器 -->
<div id='map' style='height: 600px; width: 100%;'></div>

<!-- 座標顯示 -->
<div id='cursor-coords' style='position: absolute; bottom: 10px; right: 10px; 
    background: white; padding: 5px; border: 1px solid black; z-index: 1000;'>
    座標: [X: 0, Y: 0]
</div>

<script>
// 初始化地圖和圖片
setTimeout(function(){
    var map = L.map('map', {
        crs: L.CRS.Simple,  // 使用簡單座標系統
        minZoom: -2         // 最小縮放級別
    });

    // 定義圖片範圍
    var bounds = [[0, 0], [2400, 3200]];  
    var imageUrl = '" +
imageUrl +
"';

    // 顯示背景圖片
    L.imageOverlay(imageUrl, bounds).addTo(map);
    map.fitBounds(bounds);

    // 點擊事件 - 計算座標並顯示
    map.on('click', function(e) {
        var x = Math.round((e.latlng.lng - bounds[0][1]) * (3200 / (bounds[1][1] - bounds[0][1])));
        var y = Math.round((bounds[1][0] - e.latlng.lat) * (2400 / (bounds[1][0] - bounds[0][0])));

        // 顯示座標於 HTML
        document.getElementById('cursor-coords').innerText =
            '座標: [X: ' + x + ', Y: ' + y + ']';
    });
}, 1000);
</script>

<style>
#cursor-coords {
    font-size: 14px;
    font-weight: bold;
}
</style>
")

I ultimately want to mark the location on the picture (notation with symbols) and add subtable data

thanks.

1 reply

null
    • gold_cat
    • 11 hrs ago
    • Reported - view

    I am also looking forward to a solution. 

Content aside

  • 11 hrs agoLast active
  • 1Replies
  • 29Views
  • 2 Following