Jquery how to add pin to image and keep position SQL

How can I snap a picture and save the position of my contacts?

I found this plugin , but I don't know how to save the position of these pins.

The idea is similar to Google Map, where the user can place as many contacts as they like and store those positions in the database; the next time he logs in, he will see where he put his pin.

+3


source to share


3 answers


Try this - it's pretty simple but works well.

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



You will need to customize it for your needs, but the general idea of ​​adding contact code coordinates to an image is.

+2


source


You can get node information like this:

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

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

      



Then the position of the nodes will be sent to save.php.

0


source


You can use jQuery mouse position to find out where you added the pin and shove those vars into your sql database.

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

      

The tricky part is getting jquery vars for php (Resources below) so your sql should look something like this:

user_id - pin_id - positionX - positionY

Resources

Mouse Position: http://docs.jquery.com/Tutorials:Mouse_Position

Passing jquery to php: http://www.sitepoint.com/forums/showthread.php?650046-Passing-Jquery-Var-To-Php-Mysql-Query

Hope this helps you!

EDIT FROM FIRST COMMENT ON THIS TABLE:

You can simply add a new image when you click and style it along with it:

$("#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: your div object must be set to position: relative and not sure if this will work, this is written without code checking, some changes might be required!

0


source







All Articles