2

如何在 map api v3 中创建一个可拖动的矩形,正如您在我的代码中看到的那样,我的矩形在标记中心上是可拖动的 onclick 我不会在单击所有矩形时拖动我的矩形以寻求帮助:

(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------------------------
4

2 回答 2

4

Here I drag a single rectangle.

Since there's no drag event for Rectangles, I assign a marker to its center, and let its drag event control the rect movement.

The code can be extended, like adding a marker directly to the Rectangle object, or even subclass it. You decide.

于 2012-04-09T17:39:25.893 回答
1

您可以在选项中将矩形设置为可拖动。

尝试:

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

演示

于 2014-03-06T13:50:30.283 回答