Блог

Я работаю над Картами Google и хочу реализовать функцию, при которой пользователь может нарисовать прямоугольник / прямоугольник с помощью мыши, чтобы выбрать регион на карте (например, выбрать несколько файлов в Windows).). После выбора я хочу получить все маркеры, которые попадают в регион. Я просматривал как API Карт Google, так и поиск, но не могу найти решение. Я попытался использовать jQuery, выбираемый для выбора, но все, что он возвращает, — это набор divs, из которых я не могу определить, выбран ли какой-либо маркер или нет.

Я нашел библиотеку keydragzoom (http://google-maps-utility-library-v3.googlecode.com/svn/tags/keydragzoom/1.0/docs/reference.html ) и использовал его, чтобы нарисовать прямоугольник на странице.

Позже я отредактировал библиотеку и остановил масштабирование выделенной области, а вместо этого заставил ее возвращать правильные координаты в событии перетаскивания. Затем я вручную перебрал все маркеры на карте, чтобы найти маркеры, которые находятся в этом конкретном регионе. Библиотека не давала мне правильных координат, чтобы я внес следующие изменения.

Изменена функция перетаскивания на

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