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

Question

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

我发现this plugin，但我不知道如何保存这些引脚的位置。

这个想法就像谷歌地图一样，用户可以在其中放置尽可能多的别针，并将这些别针位置保存到数据库中;当他下次登录时，他可以看到他把销钉放在哪里。

Answer 1

你可以得到这样的节点的信息：

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

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

然后节点的位置将是岗位save.php。

Answer 2

你可以使用jQuery鼠标位置来知道你添加了一个pin的位置，并将这些vars放到你的sql数据库中。

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

棘手的部分是让jQuery的瓦尔到PHP（下面的参考资料） 所以你的SQL将会类似于这样的：

USER_ID - pin_id - 位X - 位置▲

资源：

鼠标位置：http://docs.jquery.com/Tutorials:Mouse_Position

传递了jQuery PHP：http://www.sitepoint.com/forums/showthread.php?650046-Passing-Jquery-Var-To-Php-Mysql-Query

希望这可以帮助你！

编辑DUE TO的第一个评论对这个职位：

当你点击，并给它一个风格与它一起就这样你可以简单地添加新的图像：

$("#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";' />");  
} 

PS ：你的对象div应该被设置为position：relative &不确定这是否可行，这是在没有测试代码的情况下编写的，可能需要一些更改！

Answer 3

试试这个 - 它非常简单，但效果很好。

http://duncanheron.github.com/dropPin/

您需要定制适合您的需求，但对于加针坐标到图像的总体思路是存在的。