在图像顶部的特定坐标上显示值

我有一张图像，其中添加了多个标记针。然后我将这些位置（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）是正确的:) –

在图像顶部的特定坐标上显示值

回答

相关问题