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

想google地图上添加一个可拖拽的矩形框
刚刚将google地图显示在页面上，但是要在地图上实现一个可拖拽的矩形框，同时还得显示矩形的四个角的坐标。看了很多google map API 上得例子，没有合适的。望各位大侠，多多援手啊（本人刚刚接触google地图）、、、

------解决方案--------------------
JScript code

前段时间做的地图拉框查询，仅供参考
/*在地图上拖动鼠标画矩形方法
 * 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('回调函数为空，请传入回调函数');
                          }
                      }
                  });
       });
}
想google地图上添加一个可拖拽的矩形框解决方法

相关推荐
