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

Je suis en train de travailler sur Google Maps et souhaitez mettre en œuvre une fonctionnalité où un utilisateur peut dessiner une boîte/rectangle à l'aide de sa souris pour sélectionner une zone sur la carte (comme la sélection de plusieurs fichiers dans windows). Lors de la sélection, je veux obtenir tous les marqueurs qui se situent dans la région. J'ai été en regardant autour de l'api Google Maps et de la recherche, mais je suis incapable de trouver une solution. J'ai essayé à l'aide de jQuery Sélectionnable pour la sélection, mais il renvoie est un tas de divs à partir de laquelle je suis incapable de déterminer si un marqueur est sélectionné ou non.

source d'informationauteur Obi-Wan Spock | 2011-11-02

  1. 9

    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'a utilisé pour dessiner un rectangle sur la page.

    Plus tard, j'ai modifier la bibliothèque et il s'est arrêté de zoom de la zone sélectionnée et au lieu de cela fait retourner le bon de coordonnées dans " dragend de l'événement. Ensuite, j'ai manuellement boucle à travers tout le marqueur sur la carte pour trouver les marques qui sont à l'intérieur de cette région en particulier. La bibliothèque n'était pas de me donner le bon coordonne à j'ai apporté les modifications suivantes.

    Changé le DragZoom fonction de

        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 DragZoom.le prototype.onMouseUp_ fonction de

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