Sélection de boîte/rectangle dans Google Maps

Question

Je travaille sur Google Maps et je veux implémenter une fonctionnalité où un utilisateur peut dessiner une boîte/rectangle en utilisant sa souris pour sélectionner une région sur la carte (comme sélectionner plusieurs fichiers dans Windows). Lors de la sélection, je veux obtenir tous les marqueurs qui tombent dans la région. J'ai regardé autour de Google Maps API et de la recherche, mais je suis incapable de trouver une solution. J'ai essayé d'utiliser jQuery Selectable pour la sélection, mais tout ce qu'il retourne est un tas de divs à partir de laquelle je suis incapable de déterminer si un marqueur est sélectionné ou non.

Answer 1

J'ai trouvé une bibliothèque keydragzoom (http://google-maps-utility-library-v3.googlecode.com/svn/tags/keydragzoom/1.0/docs/reference.html) et l'ai utilisée pour dessiner un rectangle sur la page. Par la suite, j'ai édité la bibliothèque et l'ai empêchée de zoomer sur la zone sélectionnée et je l'ai rendue à la place avec les bonnes coordonnées dans l'événement 'dragend'. Ensuite, j'ai manuellement fait une boucle à travers tout le marqueur sur la carte pour trouver les marqueurs qui sont dans cette région particulière. La bibliothèque ne me donnait pas les coordonnées appropriées pour faire les changements suivants.

Changé la fonction 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(); 
     }); 
    } 

et la fonction 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); 
    } 
    };