Google मानचित्र में बॉक्स/आयताकार ड्रा चयन

Question

मैं Google मानचित्र पर काम कर रहा हूं और एक ऐसी सुविधा को कार्यान्वित करना चाहता हूं जहां उपयोगकर्ता मानचित्र पर किसी क्षेत्र का चयन करने के लिए अपने माउस का उपयोग करके बॉक्स/आयत खींच सकता है (जैसे विंडोज़ में एकाधिक फाइलों का चयन करना)। चयन पर, मैं इस क्षेत्र में आने वाले सभी मार्करों को प्राप्त करना चाहता हूं। मैं Google मानचित्र एपीआई और खोज दोनों के आसपास देख रहा हूं लेकिन मैं समाधान ढूंढने में असमर्थ हूं। मैंने चयन के लिए jQuery चयन योग्य का उपयोग करने की कोशिश की लेकिन यह सब लौटाता है जो divs का एक गुच्छा है जिससे मैं यह निर्धारित करने में असमर्थ हूं कि कोई मार्कर चुना गया है या नहीं।

Answer 1

मुझे लाइब्रेरी कीडैगज़ूम (http://google-maps-utility-library-v3.googlecode.com/svn/tags/keydragzoom/1.0/docs/reference.html) मिली और पृष्ठ पर एक आयत खींचने के लिए इसका इस्तेमाल किया।

बाद में, मैंने लाइब्रेरी को संपादित किया और इसे चयनित क्षेत्र ज़ूम करने से रोक दिया और इसके बजाय इसे 'ड्रैगेंड' ईवेंट में सही समन्वय वापस कर दिया। फिर मैंने उस विशेष क्षेत्र के भीतर मौजूद मार्करों को खोजने के लिए मानचित्र पर सभी मार्कर मैन्युअल रूप से looped। पुस्तकालय मुझे निम्नलिखित परिवर्तन करने के लिए उचित समन्वय नहीं दे रहा था।

को

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