谷歌地圖中的框/矩形繪製選擇

Question

我在Google地圖上工作，並希望實現一項功能，用戶可以使用他/她的鼠標在地圖上選擇區域來繪製框/矩形（例如在窗口中選擇多個文件）。選擇後，我想獲得該地區的所有標記。我一直在瀏覽谷歌地圖API和搜索，但我無法找到解決方案。我嘗試使用jQuery Selectable進行選擇，但它返回的是一串div，我無法確定是否選擇了任何標記。

Answer 1

我找到了一個庫keydragzoom（http://google-maps-utility-library-v3.googlecode.com/svn/tags/keydragzoom/1.0/docs/reference.html），並用它在頁面上繪製一個矩形。

之後，我編輯圖書館並停止縮放選定區域，而是使其在'dragend'事件中返回正確的座標。然後，我手動循環瀏覽地圖上的所有標記，以查找特定區域內的標記。圖書館沒有給我適當的協調，我做了以下修改。

改變了DragZoom功能

var prj = null; 
    function DragZoom(map, opt_zoomOpts) { 
     var ov = new google.maps.OverlayView(); 

     var me = this; 
     ov.onAdd = function() { 
      me.init_(map, opt_zoomOpts); 
     }; 
     ov.draw = function() { 
     }; 
     ov.onRemove = function() { 
     }; 
     ov.setMap(map); 
     this.prjov_ = ov; 
     google.maps.event.addListener(map, 'idle', function() { 
      prj = ov.getProjection(); 
     }); 
    } 

和DragZoom.prototype.onMouseUp_功能

DragZoom.prototype.onMouseUp_ = function (e) { 
    this.mouseDown_ = false; 
    if (this.dragging_) { 
     var left = Math.min(this.startPt_.x, this.endPt_.x); 
     var top = Math.min(this.startPt_.y, this.endPt_.y); 
     var width = Math.abs(this.startPt_.x - this.endPt_.x); 
     var height = Math.abs(this.startPt_.y - this.endPt_.y); 
     var points={ 
     top: top, 
     left: left, 
     bottom: top + height, 
     right: left + width 
     }; 
     var prj = this.prjov_.getProjection(); 
     // 2009-05-29: since V3 does not have fromContainerPixel, 
     //needs find offset here 
     var containerPos = getElementPosition(this.map_.getDiv()); 
     var mapPanePos = getElementPosition(this.prjov_.getPanes().mapPane); 
     left = left + (containerPos.left - mapPanePos.left); 
     top = top + (containerPos.top - mapPanePos.top); 
     var sw = prj.fromDivPixelToLatLng(new google.maps.Point(left, top + height)); 
     var ne = prj.fromDivPixelToLatLng(new google.maps.Point(left + width, top)); 
     var bnds = new google.maps.LatLngBounds(sw, ne); 
     //this.map_.fitBounds(bnds); 
     this.dragging_ = false; 
     this.boxDiv_.style.display = 'none'; 
     /** 
     * This event is fired when the drag operation ends. 
     * Note that the event is not fired if the hot key is released before the drag operation ends. 
     * @name DragZoom#dragend 
     * @param {GLatLngBounds} newBounds 
     * @event 
     */ 

     google.maps.event.trigger(this, 'dragend', points); 
    } 
    };