在圖像頂部的特定座標上顯示值

我有一張圖像，其中添加了多個標記針。然後我將這些位置（x和y座標）保存到數據庫中。在圖像頂部的特定座標上顯示值

這裏是我的代碼至今：與引腳名一起https://jsfiddle.net/at3wsepm/7/

座標，一旦用戶點擊保存按鈕保存到數據庫中。

_this.position.x = _this.element.position().left; 
_this.position.y = _this.element.position().top;

我需要的是，當用戶重新加載頁面時，我想要檢索從我的數據庫中的那些標誌的位置，然後重新定位它在同一圖像上。我可以使用PHP進行檢索並獲取引腳和它們的座標爲JSON，但是如何將它們再次放置在圖像上？

來源

2017-09-21 NoMadic

那麼，這取決於你如何保存和檢索數據，但假設你能夠從數據庫中獲得X和Y座標回到JavaScript，那麼你需要設置left和top屬性通過.css。請注意，您還需要設置position而不是static才能使其工作。

$("#carea").append(elem.css({ 
    position: "relative", // `left` and `top` require a `position` other than `static` 
    left: databaseX, // The pin's X coordinate in the database 
    top: databaseY // The pin's Y coordinate in the database 
}));

這將銷增加背景在由數據庫中的值指定的位置，可以看出here。

請注意，當頁面加載時，會在相對於地圖元素的左上角指定的位置添加一個圖釘;如果指定的座標超出了地圖的尺寸，它們將出現在該元素之外;地圖不會將其隱藏在其滾動條中。

希望這會有所幫助！ :)

來源

2017-09-21 02:23:37

我以這種格式獲取數據爲JSON [{「x」：165，「y」：100，「pin」：「S27」}，{「x」：447，「y」：215，「pin」：「S16」}，{「x」：189，「y」：336，「pin」：「S17」}] 我需要將引腳名稱（S27，S16，S17）他們的具體座標。 – NoMadic

嘗試使用for循環遍歷json並附加到'carea'。但它沒有得到定位。 ' // axisData是我的JSON數據（var axis in axisData） { var els =「

"+axisData[key].sensor+"

」; \t var element = $（els）.addClass（「sdetails」）; \t \t $（「＃CAREA」）追加（element.css（{ 左：axisData [關鍵] .X，//引腳的X數據庫頂部座標：axisData [關鍵] .Y //在數據庫中的銷的Y座標 }））; ' } – NoMadic

啊！我很抱歉;我忘了給元素添加一個位置。他們正在添加正確的樣式，但沒有定位**。只需添加'position：「relative」'就可以解決這個問題，可以看到[** here **]（https://jsfiddle.net/d1bemdL6/）。我已經更新了這個答案。另外，對於它的價值，你的JSON似乎是**無效的**（至少在你的評論中是這樣寫的）。你可以確保它在[** JSONLint **]（http://www.jsonlint.com）是正確的:) –

在圖像頂部的特定座標上顯示值

回答

相關問題