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

Question

我有一张图像，其中添加了多个标记引脚。稍后我会将它们的位置(x 和 y 坐标)保存到数据库中。

到目前为止，这是我的代码: https://jsfiddle.net/at3wsepm/7/

一旦用户单击“保存”按钮，坐标与引脚名称就会保存到数据库中。

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

我需要的是，当用户重新加载页面时，我想从数据库中检索这些标记的位置，然后将其再次放置在同一张图像上。我可以使用 PHP 进行检索，并以 JSON 形式获取引脚及其坐标，但如何才能将它们再次定位在图像上？

Answer 1

嗯，这取决于您保存和检索数据的精确程度，但假设您能够从数据库中将 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 所示。 .

请注意，这会在页面加载时在相对于 map 元素左上角指定的位置添加一个图钉；如果指定的坐标超出 map 尺寸，它们将出现在该元素之外； map 不会将它们隐藏在其滚动中。

希望这有帮助! :)