日期:2014-05-16  浏览次数:20494 次

想google地图上添加一个可拖拽的矩形框
刚刚将google地图显示在页面上,但是要在地图上实现一个可拖拽的矩形框,同时还得显示矩形的四个角的坐标。看了很多google map API 上得例子,没有合适的。望各位大侠,多多援手啊(本人刚刚接触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 只执行一次<