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
-
I am also looking forward to a solution.
Content aside
- 11 hrs agoLast active
- 1Replies
- 29Views
-
2
Following