【求助】电子围栏，矩形框对于标注的响应？

应用目的：
    在地图（我用的是51ditu）上通过拖拽获得一个矩形框，然后添加一个（或者几个）标记。当标记在矩形框内的时候，弹出提示框："标记没有越界"；当标记在矩形框外的时候，弹出提示框："标记越界"。问题描述：
    现在已经能够成功得到矩形框（同时能得到矩形框的对角经纬度值），已经能够标记，而且标记可以方便的进行拖拽（同时获得标记的经纬度值）。问题是，当标记在矩形框内、外时候的响应，我没有做出来，没能达到预期的效果。其他说明：
   （1）上传图片貌似不方便，我把代码都贴出来，可以直接运行，看到效果；
   （2） 刚刚接触Javascript，或许在高手眼里，问题比较愚昧，但愿能体谅下，帮帮我，我感激不尽！！
   （3） 实时交流方式：QQ--1803220843
                      [email protected]
附代码：<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=GB2312"/>
<meta name="keywords" content="LTZoomSearchControl.mouseup,LTEvent.addListener,JavaScript,灵图,51ditu Maps API,地图,范例文档,vml"/>
<title>我要地图－地图API－范例－使用拉框查找控件让用户选择位置区域</title>
<style type="text/css">v\:*{behavior:url(#default#VML);}</style>
<script language="javascript" src=http://api.51ditu.com/js/maps.js></script>
<script language="javascript">

var map;
//本函数是在用户每次拉框操作完成之后执行的操作，bounds是代表用户拉框选择的区域的范围
function doit(bounds)
{
var str="你选择的区域坐标为：\n";
str+="左上角坐标："+bounds.getXmin()+","+bounds.getYmax()+"\n";
str+="右下角坐标："+bounds.getXmax()+","+bounds.getYmin()+"\n";
alert(str); 

var rect = new LTRect(bounds);
map.addOverLay(rect);

LTEvent.addListener(rect,"click",onClick);
LTEvent.bind(rect,"mouseover",rect,onMouseOver);
LTEvent.bind(rect,"mouseout",rect,onMouseOut);

}



function onClick()
{
alert('您点在矩形上');
}

function onMouseOver()
{
       this.setLineColor("blue");
this.setFillColor("green");
this.setLineStroke(3);
}

function onMouseOut()
{
this.setLineColor("red");
this.setFillColor("red");
this.setLineStroke(5);
}


function onDragEnd(point)
{
var str="标注被拖动到：\n";
str+="经度："+point.getLongitude()+"\n";
str+="纬度："+point.getLatitude()+"\n";

var Lat1 = parseInt( point.getLatitude() );

alert(str);
}
function onLoad()
{
map=new LTMaps("mapDiv");
map.centerAndZoom(new LTPoint(11640969,3994940),6);
map.addControl(new LTStandMapControl()); var control = new LTZoomSearchControl("red","red",1,0.4);     //建立新的拉框查找控件  
         control.setLabel("电子围栏" ); 
map.addControl(control); //添加控件到地图

var er=new LTMarker(new LTPoint(11640969,3994940));
er.enableDrag();
map.addOverLay(er);
LTEvent.addListener(er,"dragend",onDragEnd);
LTEvent.addListener(control,"mouseup",doit); //设置在用户拉框完成之后执行doit函数

}

</script>
</head>
<body onload="onLoad()">
<div id="mapDiv" style="position:absolute;width:400px; height:300px;"><div align="center" style="margin:12px;"><a href="mapsapi/help.html" target="_blank" style="color:#D01E14;font-weight:bolder;font-size:12px;">看不到地图请点这里</a></div></div>
<div style="position:absolute;left:420px;">
<ul>
<li>查看<b>本页面源文件</b>可以了解如何使用51ditu Maps API实现本功能；</li><br/><br/> <li>点击"拉框查找"按钮，进入拉框操作，再次点击"拉框查找"按钮退出拉框查找操作；</li>
<li>进入拉框操作模式之后，鼠标在地图上拖拽即可选择一个区域；</li>
<li>用户每次拖拽之后系统都将触发一个"mouseup"事件，并将用户选择的区域以LTBounds对象的方式作为事件参数返回，因此监视LTBounds的"mouseup"事件即可在用户拉框完成之后执行自己的代码，从而实现自己的应用功能；</li> <br/><br/><li><a href="../../examples.html">返回所有范例列表</a></li>
</ul>
</div>
</body>
</html>

解决方案 »

  1.   

    思路：
    1.画框时记录下框的范围
    2.在er的drag事件中进行越界判断代码：
    <html xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=GB2312"/>
    <meta name="keywords" content="LTZoomSearchControl.mouseup,LTEvent.addListener,JavaScript,灵图,51ditu Maps API,地图,范例文档,vml"/>
    <title>我要地图－地图API－范例－使用拉框查找控件让用户选择位置区域</title>
    <style type="text/css">v\:*{behavior:url(#default#VML);}</style>
    <script language="javascript" src=http://api.51ditu.com/js/maps.js></script>
    <script language="javascript">
        
        var map, lastExtent;
        //本函数是在用户每次拉框操作完成之后执行的操作，bounds是代表用户拉框选择的区域的范围
        function doit(bounds)
        {
            var str="你选择的区域坐标为：\n";
            str+="左上角坐标："+bounds.getXmin()+","+bounds.getYmax()+"\n";
            str+="右下角坐标："+bounds.getXmax()+","+bounds.getYmin()+"\n";        
            alert(str); 
            
    lastExtent = bounds;
            var rect = new LTRect(bounds);
            map.addOverLay(rect);        
            
            LTEvent.addListener(rect,"click",onClick);
            LTEvent.bind(rect,"mouseover",rect,onMouseOver);
            LTEvent.bind(rect,"mouseout",rect,onMouseOut);
            
        }
        
        
        
            function onClick()
            {
                alert('您点在矩形上');
            }
            
            function onMouseOver(a)
            {
                  this.setLineColor("blue");
                this.setFillColor("green");        
                this.setLineStroke(3);
            }
            
            function onMouseOut()
            {
                this.setLineColor("red");
                this.setFillColor("red");
                this.setLineStroke(5);
            }
            
            
                function onDragEnd(point)
                {
                    var str="标注被拖动到：\n";
                    str+="经度："+point.getLongitude()+"\n";
                    str+="纬度："+point.getLatitude()+"\n";
                    
                    var Lon1 = parseInt( point.getLongitude() );
                    var Lat1 = parseInt( point.getLatitude() );
                    
    if(lastExtent){
    if(Lon1>lastExtent.Xmin && Lon1<lastExtent.Xmax && Lat1>lastExtent.Ymin && Lat1<lastExtent.Ymax){
    alert("标记没有越界");
    }
    else{
    alert("标记越界");
    }
    }
                }
            function onLoad()
        {
            map=new LTMaps("mapDiv");
            map.centerAndZoom(new LTPoint(11640969,3994940),6);
            map.addControl(new LTStandMapControl());        var control = new LTZoomSearchControl("red","red",1,0.4);        //建立新的拉框查找控件     
             control.setLabel("电子围栏" ); 
            map.addControl(control);            //添加控件到地图
            
            var er=new LTMarker(new LTPoint(11640969,3994940));
            er.enableDrag();
            map.addOverLay(er);
            LTEvent.addListener(er,"dragend",onDragEnd);            
            LTEvent.addListener(control,"mouseup",doit);    //设置在用户拉框完成之后执行doit函数    
            
        }    
        
    </script>
    </head>
    <body onload="onLoad()">
        <div id="mapDiv" style="position:absolute;width:400px; height:300px;"><div align="center" style="margin:12px;"><a href="mapsapi/help.html" target="_blank" style="color:#D01E14;font-weight:bolder;font-size:12px;">看不到地图请点这里</a></div></div>
        <div style="position:absolute;left:420px;">
            <ul>
            <li>查看<b>本页面源文件</b>可以了解如何使用51ditu Maps API实现本功能；</li><br/><br/>        <li>点击"拉框查找"按钮，进入拉框操作，再次点击"拉框查找"按钮退出拉框查找操作；</li>
            <li>进入拉框操作模式之后，鼠标在地图上拖拽即可选择一个区域；</li>
            <li>用户每次拖拽之后系统都将触发一个"mouseup"事件，并将用户选择的区域以LTBounds对象的方式作为事件参数返回，因此监视LTBounds的"mouseup"事件即可在用户拉框完成之后执行自己的代码，从而实现自己的应用功能；</li>        <br/><br/><li><a href="../../examples.html">返回所有范例列表</a></li>
            </ul>
        </div>
    </body>
    </html>
      

  2.   

    在地图（我用的是51ditu）上通过拖拽获得一个矩形框，然后添加一个（或者几个）标记。
    没看懂这句话的意思。。是拖拽完后，在地图上单击标记？
      

  3.   


    感谢你给我提供思路，和我最初的想法是一致的。
    刚刚接触Javascript，当时一时没想过来，呵呵，现在问题已经解决了。
    再次感谢你！~
      

  4.   

    已经解决了，谢谢各位好心人的帮助！谢谢！我把地址贴上，欢迎拍砖~~http://blog.csdn.net/zhangyuehua123/article/details/6895305