想google地图上添加一个可拖拽的矩形框


前段时间做的地图拉框查询，仅供参考
/*在地图上拖动鼠标画矩形方法
 * drawRectangleCallBack 为画矩形结束时回调函数
 * */
XMap.prototype.drawRectangle = function (drawRectangleCallBack){
 //取消拉框放大缩小事件
  this.cancelZoomExtEvent();
  if(this.getDrawObject()&&this.getDrawObject()['object']){
   this.getDrawObject()['object'].setMap(null);
   delete this.getDrawObject()['object'];
  }
  var xMap = this;
  var rectangle = null;
  xMap.map.draggable = false;
  var mapMouseDownEvent = google.maps.event.addListener(xMap.map, 'mousedown', function(event) {
   var centerPoint = event.latLng;
   var latLngBounds =  new google.maps.LatLngBounds(centerPoint,centerPoint);
    rectangle= new google.maps.Rectangle({
   bounds:latLngBounds,
   fillColor: "#FF0000",
   fillOpacity: 0.35,
   strokeColor:'#FF0000',
   strokeOpacity: 0.8,
   strokeWeight: 2,
   draggable: true,
   map:xMap.map});
     var  mapMouseMoveEvent = google.maps.event.addListener(xMap.map, 'mousemove', function(event1) {
   var latLngBoundsTemp =  new google.maps.LatLngBounds(centerPoint,event1.latLng);
   rectangle.setBounds(latLngBoundsTemp);
      });
     var circleMouseMoveEvent =  google.maps.event.addListener(rectangle, 'mousemove', function(event) {
   var latLngBoundsTemp =  new google.maps.LatLngBounds(centerPoint,event.latLng);
   rectangle.setBounds(latLngBoundsTemp);
      });
     var mapMouseUpEvent = google.maps.event.addListener(xMap.map, 'mouseup', function(event) {
    if(mapMouseDownEvent){
    google.maps.event.removeListener(mapMouseDownEvent);
    }
   if(mapMouseMoveEvent){
   google.maps.event.removeListener(mapMouseMoveEvent);
   }
   if(circleMouseMoveEvent){
   google.maps.event.removeListener(circleMouseMoveEvent);
   }
   if(mapMouseUpEvent){
   google.maps.event.removeListener(mapMouseUpEvent);
   }
   if(rectangleMouseUpEvent){
   google.maps.event.removeListener(rectangleMouseUpEvent);
   }
   //确保地图mouseup 和对象mouseup 只执行一次
   if(!xMap.map.draggable){
   xMap.map.draggable = true;
   xMap.getDrawObject()['object'] = rectangle;
   if(drawRectangleCallBack){
    drawRectangleCallBack();
   }else{
   alert('回调函数为空，请传入回调函数');
   }
   }
   }); 
   var rectangleMouseUpEvent = google.maps.event.addListener(rectangle, 'mouseup', function(event) {
    if(mapMouseDownEvent){
    google.maps.event.removeListener(mapMouseDownEvent);
    }
   if(mapMouseMoveEvent){
   google.maps.event.removeListener(mapMouseMoveEvent);
   }
   if(circleMouseMoveEvent){
   google.maps.event.removeListener(circleMouseMoveEvent);
   }
   if(mapMouseUpEvent){
   google.maps.event.removeListener(mapMouseUpEvent);
   } 
   if(rectangleMouseUpEvent){
   google.maps.event.removeListener(rectangleMouseUpEvent);
   }
   //确保地图mouseup 和对象mouseup 只执行一次
   if(!xMap.map.draggable){
   xMap.map.draggable = true;
   xMap.getDrawObject()['object'] = rectangle;
   if(drawRectangleCallBack){
    drawRectangleCallBack();
   }else{
   alert('回调函数为空，请传入回调函数');
   }
   }
   });
   });
}

解决方案 »

  1.   


    别人强调要用V3版的，能合适吗？还有需要应用JS文件吗？我是直接一句代码
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
      

  2.   

    大侠们，给点代码吧，最好能有个demo 啊。我以前没接触过google map 
      

  3.   

    有没有高人才出现？加分求Demo！
      

  4.   

    大侠，你写的代码中的XMap是什么？
      

  5.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>电子围栏</title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    function iniz(){
    var myLatlng=new google.maps.LatLng(22.688815,114.2764789);
    var myOptions={
    zoom:12,
    center:myLatlng,
    mapTypeId:google.maps.MapTypeId.ROADMAP
    }
    var map= new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    //设置了标志
    var er = new google.maps.Marker({
    position:myLatlng,
    map:map,
    title:"hello,world"
    });
    //多边形
    var rectangle=new google.maps.Rectangle();
    var rectOptions={
    strokeColor:"#ff0000",
    strokeOpacity:0.8,
    strokeWeight:2,
    fillColor:"#ff0000",
    fillOpacity:0.35,
    map:map,
    clickable:false,
    bounds:map.getBounds()
    };

    var beginlatlng="";//记录起初点坐标
    var endlatlng=""//记录结束点坐标<br />
    var rectBounds="";
    var SfClick="";
    var SfMove="";
    var ClickCount=0;//点击次数
    SfClick=google.maps.event.addListener(map,'click',function(e){
    var begin=e.latLng;
    ClickCount++;
    if(ClickCount==1){
    SfMove=google.maps.event.addListener(map,"mousemove",function(e){
    beginlatlng=begin;
    endlatlng=e.latLng;
    rectOptions.bounds = new google.maps.LatLngBounds(beginlatlng,endlatlng);
    rectOptions.map=map;
    rectangle.setOptions(rectOptions);
    });
    }else{
    google.maps.event.removeListener(SfMove);
    if(window.confirm("确定该电子围栏范围？")){
    ClickCount=0;
    alert('起初坐标点'+beginlatlng+'\n介绍坐标点'+endlatlng);
    }else{
    ClickCount=0;
    rectOptions.map=null;
    rectangle.setOptions(rectOptions);
    }
    }
    });
    }
    </script>
    </head><body onload="iniz()">
    <div id="map_canvas" style="width:800px;height:600px"></div>
    </body>
    </html>