Selezione tracciato rettangolo/box in Google Maps

Question

Sto lavorando su Google Maps e voglio implementare una funzionalità in cui un utente può disegnare una casella/rettangolo usando il mouse per selezionare una regione sulla mappa (come selezionare più file in Windows). Dopo la selezione, voglio ottenere tutti i marcatori che cadono nella regione. Ho guardato intorno all'API di Google Maps e alla ricerca ma non sono riuscito a trovare una soluzione. Ho provato ad usare jQuery Selezionabile per la selezione, ma tutto ciò che ritorna è un mucchio di div da cui non sono in grado di determinare se un qualsiasi marker è selezionato o meno.

Answer 1

Ho trovato una libreria keydragzoom (http://google-maps-utility-library-v3.googlecode.com/svn/tags/keydragzoom/1.0/docs/reference.html) e l'ho usata per disegnare un rettangolo sulla pagina.

In seguito, ho modificato la libreria e l'ho interrotta dallo zoom sull'area selezionata e invece ho restituito le coordinate corrette nell'evento 'trascina'. Quindi ho eseguito manualmente il looping di tutti i marker sulla mappa per trovare i marker che si trovano all'interno di quella particolare regione. La libreria non mi dava le coordinate corrette per apportare le seguenti modifiche.

Modificato la funzione DragZoom a

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(); 
     }); 
    } 

e DragZoom.prototype.onMouseUp_ funzione per

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); 
    } 
    };