如何在 Circle 中使用 React 或 vanilla.js 進行標記

Question

我想在圓圈中使用標記，onClick 標記點，輸出 json obj
有沒有npm package可以用

onClick

Answer 1

只需點擊 position 相對於父標簽，然后使用樣式左/上移動子標簽。

 // get reference let outer = document.getElementById("container"); let inner = document.getElementById("circle"); // add click listener to parent tag outer.addEventListener("click", function(event) { let result = { Azimut: { x: event.offsetX, y: event.offsetY, }, Size: 10, } // inner.style.top = (result.Azimut.y - result.Size / 2) + "px"; // inner.style.left = (result.Azimut.x - result.Size / 2) + "px"; inner.style.width = result.Size + "px"; inner.style.height = result.Size + "px"; })

 <div id="container" style=" width: 100px; height: 100px; border: 1px solid black; position: relative;"> <div id="circle" style=" border: 1px solid black; position: absolute; "></div> <div>