jquery如何将pin添加到图像并将位置保存到SQL

如何锁定图像并保存锁定的位置

我找到了，但我不知道如何保存这些销的位置

---

这个想法就像谷歌地图，用户可以在地图上输入任意数量的pin，并将这些pin位置保存到数据库中；下次登录时，他可以看到自己的pin码放在了哪里。

您可以获得如下节点信息：

function getNodes(){
    var nodes = [];
    $('img', $('#container')).each(function(){
        nodes.push([$(this).css('top'), $(this).css('left')]);
    });

    $.post('save.php', {nodes: nodes}, function(data){}, 'json');
}

$("#imageDiv").click(function (e) {
     $(this).addImage($(this), e.pageX, e.pageY);
});


function addImage(object, xPos, yPos){
     object.append("<img src='markerImg.png' style='position:absolute; left:"+xPos+";   top:"+yPos";' />");     
}

---

然后，节点的位置将发布到save.php。

您可以使用jQuery鼠标位置来知道您在哪里添加了pin，并将这些变量放入sql数据库中

$("#special").click(function(e){
      $('#imgId').html(e.pageX +', '+ e.pageY);
   }); 

棘手的部分是将jquery变量转换为php（参考资料如下） 因此，sql的外观应该与此类似：

function getNodes(){
    var nodes = [];
    $('img', $('#container')).each(function(){
        nodes.push([$(this).css('top'), $(this).css('left')]);
    });

    $.post('save.php', {nodes: nodes}, function(data){}, 'json');
}

$("#imageDiv").click(function (e) {
     $(this).addImage($(this), e.pageX, e.pageY);
});


function addImage(object, xPos, yPos){
     object.append("<img src='markerImg.png' style='position:absolute; left:"+xPos+";   top:"+yPos";' />");     
}

用户标识-引脚标识-位置X-位置Y

资源：

鼠标位置：

将jquery传递给php:

希望这对你有帮助

根据此帖子的第一条评论进行编辑：

您只需在单击时添加一个新图像，并为其提供样式，如下所示：

function getNodes(){
    var nodes = [];
    $('img', $('#container')).each(function(){
        nodes.push([$(this).css('top'), $(this).css('left')]);
    });

    $.post('save.php', {nodes: nodes}, function(data){}, 'json');
}

$("#imageDiv").click(function (e) {
     $(this).addImage($(this), e.pageX, e.pageY);
});


function addImage(object, xPos, yPos){
     object.append("<img src='markerImg.png' style='position:absolute; left:"+xPos+";   top:"+yPos";' />");     
}

$（“#imageDiv”）。单击（函数（e）{
$（this）.addImage（$（this），e.pageX，e.pageY）；
});
函数addImage（对象、xPos、YPO）{
对象。追加（“”）；
}

---

PS：您的object div应该设置为position:relative&不确定这是否有效，这是在未测试代码的情况下编写的，可能需要进行一些更改试试这个——它非常简单，但效果很好

您需要根据自己的需要对其进行定制，但在图像中添加pin坐标的总体思路仍然存在