用js在map上 实现 不规则描点，记录在map里的坐标

如题，当我的鼠标在map， 任意一个点，A点，点下，然后，随意点到map的任何地方，当回到 A点时候，记录下， 这一整个， 不规则过程的所有坐标（相对于map的xy），记录入库 ~~~求解

解决方案 »

  1.   


    <!DOCTYPE html>
    <html>
        <head>
            <script language="javascript" type="text/javascript" src="jquery-1.5.1.min.js"></script>
            <script type="text/javascript">
              $(function(){
                var clickMark = false;
                var pointArr = [];
                $(document.body).click(function(event){
                   var evt = window.event || event;
                   var tar = evt.srcElement || evt.target;
                   if(clickMark){
                      var x = evt.pageX || evt.clientX;
                      var y = evt.pageY || evt.clientY;
                      var position = "X:" + x + ",Y:" + y;
                      pointArr.push(position);
                   }
                });
                
                $("#click").click(function(){
                   if(clickMark)alert(pointArr.join("&"));
                   clickMark = !clickMark;
                });
              });
            </script>
        </head>
        <body>    
            <div id="out" style="margin:0px;width:300px;height:300px;border:1px red solid">
                <label id="click">A</label>
            </div>
        </body>
    </html>这样？
      

  2.   


    <!DOCTYPE html>
    <html>
        <head>
            <script language="javascript" type="text/javascript" src="jquery-1.5.1.min.js"></script>
            <script type="text/javascript">
              $(function(){
                var clickMark = false;
                var pointArr = [];
                $(document.body).click(function(event){
                   var evt = window.event || event;
                   var tar = evt.srcElement || evt.target;
                   if(clickMark){
                      var x = evt.pageX || evt.clientX;
                      var y = evt.pageY || evt.clientY;
                      var position = "X:" + (x - $("#map").offset().left) + ",Y:" + (y - $("#map").offset().top);
                      pointArr.push(position);
                   }
                });
                
                $("#click").click(function(event){
                   event.stopPropagation();
                   if(clickMark)alert(pointArr.join("&"));
                   clickMark = !clickMark;
                });
              });
            </script>
        </head>
        <body>
            
            
            
            <div id="map" style="top:100px;left:100px;margin:0px;width:300px;height:300px;border:1px red solid;position:absolute">
                <label id="click">A</label>
            </div>
        </body>
    </html>这样是相对map的坐标
      

  3.   

    我想再请问sharkdbj一下 ，
      当我第一次点击页面的任意一个点，为起始点，然后，当鼠标再次点到起始点的时候为结束点，记录我所有在起始点和结束之间点的所有坐标！该如何去判断啊！
      

  4.   


    <!DOCTYPE html>
    <html>
        <head>
            <script language="javascript" type="text/javascript" src="jquery-1.5.1.min.js"></script>
            <script type="text/javascript">
              $(function(){
                var clickMark = false;
                var pointArr = [];
                $("#map").click(function(event){
                   var evt = window.event || event;
                   var tar = evt.srcElement || evt.target;
                   var caller = $(this);
                   
                   var x = (-[1,])? evt.pageX : evt.clientX;
                   x -= caller.offset().left;
                   var y = (-[1,])? evt.pageY : evt.clientY; 
                   y -= caller.offset().top;
                   if(clickMark == false){
                      var span = $("<span>A</span>");
                      span.attr("id","start").css({position:"relative",top:y,left:x,cursor:"pointer"}).click(function(event){
                            var evt = window.event || event;
                            if (evt && evt.stopPropagation) {//非IE  
                               evt.stopPropagation();  
                            }  
                            else {//IE  
                               evt.cancelBubble = true;  
                            }  
                            $("#recordPoint").html(pointArr.join("&"));
                            caller.find("#start").remove();
                            clickMark = false;
                            pointArr = [];
                         });
                      caller.append(span);
                      clickMark = true;
                   }
                   else{
                      var position = "X:" + x + ",Y:" + y;
                      pointArr.push(position);
                   }
                   
                });
                
              });
            </script>
        </head>
        <body>
            
            
            
            <div id="map" style="top:100px;left:100px;margin:0px;width:300px;height:300px;border:1px red solid;position:absolute">        </div>
            <div id="recordPoint"></div>
        </body>
    </html>这样呢？代码能力比较挫，lz将就着看吧
      

  5.   

    谢谢sharkdbj  根据你个给我的代码来改改！结贴 给分 再次感谢大侠