Wie kann ich ein ziehbares Rechteck in der Karte erstellen? Api v3

Question

Wie kann ich ein ziehbares Rechteck in map api v3 erstellen, wie Sie in meinem Code sehen können, ist mein Rechteck ziehbar, klicken Sie auf die Mitte des Markers, ich ziehe mein Rechteck beim Klicken von allen das Rechteck thx für die Hilfe:

(function() 
{ 
    window.onload = function() 
    { 
     var path; 
     var counter = 0; 
     // Creating a map 
     var options = 
     { 
      zoom: 11, 
      center: new google.maps.LatLng(49.2541, -123.072), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('mapDiv'), options); 




    };// end window.onload 



})();// end anonymous function 

    //-------------------------createRectangle BEGINS--------------------------- 
    /** 
     * Creates the rectangle 
     */ 
    function createRectangle() 
    { 
      // make the center marker 
      try 
      { 
       markerCenter.setMap(null); 
       markerSouthWest.setMap(null); 
       markerNorthEast.setMap(null); 
       rectangle.setMap(null); 
       fusionLayer.setMap(null); 
      } 
      catch(err){} 
      centerPositionSave = map.getCenter(); 

      latLngSouthWest = map.getCenter().DestinationPoint(225,4200); // 225 degrees, 1200 meters 
      latLngNorthEast = map.getCenter().DestinationPoint(45,4200); // 45 degrees, 1200 meters 
      bounds = new google.maps.LatLngBounds(latLngSouthWest,latLngNorthEast); 
      rectangle = new google.maps.Rectangle 
      (
       { 
        strokeWeight: 2, 
        bounds:bounds, 
        map:map,      
       } 
      ); // end rectangle 
      markerSouthWest = new google.maps.Marker(
      { 
       draggable: true, 
       title: 'south west', 
       icon:polyEditSquare, 
       raiseOnDrag:false, 
       position: latLngSouthWest, 
       map: map 
      }); // end markerSouthWest 
      google.maps.event.addListener(markerSouthWest,'drag',markerSouthWestDrag); 
      markerNorthEast = new google.maps.Marker(
      { 
       draggable: true, 
       title: 'north east', 
       icon:polyEditSquare, 
       raiseOnDrag:false, 
       position: latLngNorthEast, 
       map: map 
      }); // end markerNorthEast 
      google.maps.event.addListener(markerNorthEast,'drag',markerNorthEastDrag); 
      markerCenter = new google.maps.Marker(
      { 
       draggable: true, 
       title: 'center', 
       icon: new google.maps.MarkerImage("icons/move.png"), 
       raiseOnDrag:false, 
       position: map.getCenter(), 
       map: map 
      });// end markerCenter 
      markerClose = new google.maps.Marker(
      { 
       draggable: false, 
       title: 'Fermer', 
       icon: new google.maps.MarkerImage("icons/x.png", new google.maps.Size(16,16), new google.maps.Point(0,0), new google.maps.Point(8,8)), 
       raiseOnDrag:false, 
       position: new google.maps.LatLng(latLngNorthEast.lat(), latLngSouthWest.lng()), 
       map: map 
      });// end markerClose 
      google.maps.event.addListener(markerCenter, 'drag', markerCenterDrag); 
      google.maps.event.addListener(markerClose,'click',markerCenterDoubleClick); 

    }//end of createRectangle 

    //new google.maps.LatLng(latLngSouthWest.lat(),latLngNorthEast.lng())///////////////////////////:::::: 

    //------------------------------createRectangle ENDS------------------------ 





    //-------------------------markerCenterDoubleClick BEGINS--------------------------- 
    /** 
     * Handles the markerCenter doubleclick event. Removes the rectangle. 
     */ 
    function markerCenterDoubleClick(e) 
    { 
     rectangle.setMap(null); 
     markerCenter.setMap(null); 
     markerSouthWest.setMap(null); 
     markerNorthEast.setMap(null); 
     markerClose.setMap(null); 
    }//end of markerCenterDoubleClick 
    //------------------------------markerCenterDoubleClick ENDS------------------------ 





    //-------------------------markerCenterDrag BEGINS--------------------------- 
    /** 
     * Handles the center marker drag event. We want the southwest and northwest markers to update accordingly 
    */ 
    function markerCenterDrag(e) 
    { 
     var southWest = markerSouthWest.getPosition(); 
     var northEast = markerNorthEast.getPosition(); 
     centerPositionNew = markerCenter.getPosition(); 
     var distance = google.maps.geometry.spherical.computeDistanceBetween(centerPositionSave,centerPositionNew); 
     var headingNew = google.maps.geometry.spherical.computeHeading(centerPositionSave,centerPositionNew); 
     var newSouthWest = google.maps.geometry.spherical.computeOffset(southWest,distance,headingNew); 
     var newNorthEast = google.maps.geometry.spherical.computeOffset(northEast,distance,headingNew); 
     markerSouthWest.setPosition(newSouthWest); 
     markerNorthEast.setPosition(newNorthEast); 
     bounds = new google.maps.LatLngBounds(newSouthWest,newNorthEast); 
     rectangle.setBounds(bounds); 
     centerPositionSave = centerPositionNew; 
     markerClose.setPosition(new google.maps.LatLng(newNorthEast.lat(), newSouthWest.lng())); 

    }//end of markerCenterDrag 
    //------------------------------markerCenterDrag ENDS------------------------ 



    //-------------------------markerSouthWestDrag BEGINS--------------------------- 
    /** 
    * Handles the southwest marker drag event. We want the rectangle to update accordingly. 
    */ 
    function markerSouthWestDrag(e) 
    { 
     latLngSouthWest = markerSouthWest.getPosition(); 
     latLngNorthEast = markerNorthEast.getPosition(); 
     bounds = new google.maps.LatLngBounds(latLngSouthWest,latLngNorthEast); 
     rectangle.setBounds(bounds); 
     center = bounds.getCenter(); 
     markerCenter.setPosition(center); 
     centerPositionSave = center; 
     markerClose.setPosition(new google.maps.LatLng(latLngNorthEast.lat(), latLngSouthWest.lng())); 

    }//end of markerSouthWestDrag 
    //------------------------------markerNorthEastDrag ENDS------------------------ 

    /** 
    * Handles the southwest marker drag event. We want the rectangle to update accordingly. 
    */ 
    function markerNorthEastDrag(e) 
    { 
     latLngSouthWest = markerSouthWest.getPosition(); 
     latLngNorthEast = markerNorthEast.getPosition(); 
     bounds = new google.maps.LatLngBounds(latLngSouthWest,latLngNorthEast); 
     rectangle.setBounds(bounds); 
     center = bounds.getCenter(); 
     markerCenter.setPosition(center); 
     centerPositionSave = center; 
     markerClose.setPosition(new google.maps.LatLng(latLngNorthEast.lat(), latLngSouthWest.lng())); 

    }//end of markerNorthEastDrag 
    //------------------------------markerNorthEastDrag ENDS------------------------ 

//-------------------------fusionCommunityCentres BEGINS--------------------------- 
/** 
    * Puts the community centres Fusion Table on the map 
    */ 
function fusionCommunityCentres() 
{ 
    tableId = 1067437; 
    southWest = markerSouthWest.getPosition().toString(); 
    northEast = markerNorthEast.getPosition().toString(); 
    query = "SELECT * FROM " + tableId + " WHERE ST_INTERSECTS(geometry, RECTANGLE(LATLNG" + 
      southWest + ", LATLNG" + northEast + "))"; 
    $("#queryOutput").html("Query sent to Fusion Tables:<br>" + query); 
    fusionLayer = new google.maps.FusionTablesLayer(tableId, 
    { 
     query: query, 
     map:map 
    }); 
//layer.setMap(map); 
}//end of fusionCommunityCentres 
//------------------------------fusionCommunityCentres ENDS------------------------ 

Answer 1

Here I drag a single rectangle.

Da es für Rectangles keine Drag-Ereignis ist, ordne ich einen Marker zu seiner Mitte und ließ seine Drag-Ereignis die rect Bewegung steuern.

Der Code kann erweitert werden, z. B. das Hinzufügen einer Markierung direkt zum Rectangle-Objekt oder sogar eine Unterklasse. Du entscheidest.

Answer 2

Sie können das Rechteck so einstellen, dass es ziehbar ist.

Versuchen:

var rectangle = new google.maps.Rectangle({ 
    strokeColor: '#FF0000', 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: '#FF0000', 
    fillOpacity: 0.35, 
    map: map, 
    draggable:true,//<-----------Here set draggable option 
    bounds: new google.maps.LatLngBounds(
     new google.maps.LatLng(33.671068, -116.25128), 
     new google.maps.LatLng(33.785282, -116.133942)) 
    }); 

DEMO