Google地图中的框/矩形绘制选择 [英] Box/Rectangle Draw Selection in Google Maps

问题描述

我在Google地图上工作，并希望实现一项功能，用户可以使用他/她的鼠标在地图上选择区域（如在窗口中选择多个文件）来绘制方框/矩形。选择后，我想获得该地区的所有标记。我一直在浏览谷歌地图API和搜索，但我无法找到解决方案。我尝试使用jQuery Selectable进行选择，但它返回的是一串div，我无法确定是否选择了任何标记。

解决方案

我找到了一个库keydragzoom（ http://google-maps-utility-library-v3.googlecode.com/svn/tags/keydragzoom/1.0/ docs / reference.html ）并用它在页面上绘制一个矩形。

稍后，我编辑图书馆并停止缩放选定区域，而是让它返回'dragend'事件中的正确坐标。然后，我手动循环浏览地图上的所有标记，以查找特定区域内的标记。图书馆没有给我适当的协调，我做了以下修改。

将DragZoom函数更改为

  var prj = null; 
函数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：因为V3没有fromContainerPixel，
 //需要在这里找到偏移量
 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（ends）; 
 this.dragging_ = false; 
 this.boxDiv_.style.display ='none'; 
 / ** 
 *拖动操作结束时触发此事件。 
 *请注意，如果在拖动操作结束之前释放热键，则该事件不会被触发。 
 * @name DragZoom＃dragend 
 * @param {GLatLngBounds} newBounds 
 * @event 
 * / 
 
 google.maps.event.trigger（这，'dragend'，点）; 
} 
}; 
  

I am working on Google Maps and want to implement a feature where a user can draw a box/rectangle using his/her mouse to select a region on map (like selecting multiple files in windows). Upon selection, I want to get all the markers that fall in the region. I have been looking around both Google Maps api and search but I am unable to find a solution. I tried using jQuery Selectable for selection but all it returns is a bunch of divs from which I am unable to determine if any marker is selected or not.

解决方案

I found a Library keydragzoom (http://google-maps-utility-library-v3.googlecode.com/svn/tags/keydragzoom/1.0/docs/reference.html) and used it to draw a rectangle on the page.

Later, I edit the library and stopped it from zooming the selected area and instead made it return the correct co-ordinates in 'dragend' event. Then I manually looped through all the marker on the map to find the markers that are within that particular region. The library was not giving me the proper co-ordinates to I made the following changes.

Changed the DragZoom function to

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

and DragZoom.prototype.onMouseUp_ function to

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

这篇关于Google地图中的框/矩形绘制选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！