Question

我有一个应用程序，在某个点上谷歌地图上有一个矩形，我必须沿着顶点旋转矩形以及它应该是可编辑的，但矩形的宽度应该总是大于它的高度

我已经看到了关于矩形旋转的堆叠溢出的其他几个解决方案，建议用户使用折线或多边形，但是因为我需要每边之间的角度差为90，所以我不能转移到其他形状。 / p>

这是我的代码：

   var rectangle;
   var map;
   var markers = [];
   var north_east_degree=30;
   var south_west_degree=210;

   var center = new google.maps.LatLng(18.5021, 73.8774);   // Circle center

map = new google.maps.Map(document.getElementById('map'), {
  center: center,
  mapTypeId: google.maps.MapTypeId.SATELLITE,
  zoom: 90,
  heading: 90,
  tilt: 45
});

  var north_point=center.destinationPoint(north_degree, 0.08); 
  var east_point=center.destinationPoint(east_degree, 0.08);
  var south_point=center.destinationPoint(south_degree, 0.08); 
  var west_point=center.destinationPoint(west_degree, 0.08);

   var bounds = {
    north: north_point.lat(),
    east: east_point.lng(),
    south: south_point.lat(),
    west: west_point.lng()
   };

   rectangle = new google.maps.Rectangle({
    bounds: bounds,
    editable: true,
    draggable: true,
    strokeColor: "#000000",
    strokeOpacity: 0.8,
    fillOpacity: 0.5,
    zIndex: -1
   });

  rectangle.setMap(map);

因为没有可用于矩形的旋转事件所以现在我用过点击事件：see image here

 rectangle.addListener('click', rotate_rect);

最初，如果我保持上面给出的角度，我得到这个结果，在第二次迭代，每个角度增加30，然后矩形看起来相当倾斜，第三次点击矩形变为单线，每边之间的角度差我猜是非常小的。

  function rotate_rect(event)
   {
     var nor_east = rectangle.getBounds().getNorthEast();
     var south_west = rectangle.getBounds().getSouthWest();
     x1 = nor_east.lat();
     x2 = south_west.lat();
     y1 = nor_east.lng();
     y2 = south_west.lng();

     var cx= x1 + ((x2 - x1) / 2);
     var cy = y1 + ((y2 - y1) / 2);
      cx = cx.toPrecision(6);
     cy= cy.toPrecision(6)

   var center_rec = new google.maps.LatLng(cx,cy);

   north_east_degree=north_east_degree+30;
   south_west_degree=south_west_degree+30;
   if(north_east_degree==180){
     north_east_degree=30;
     south_west_degree=210;

   }



  var newPointNorthEast=center_rec.destinationPoint(north_east_degree, calcCrow(center_rec.lat(),center_rec.lng(),nor_east.lat(),nor_east.lng()).toFixed(2));
  var newPointSouthWest=center_rec.destinationPoint(south_west_degree, calcCrow(center_rec.lat(),center_rec.lng(),south_west.lat(),south_west.lng()).toFixed(2));

  var bounds = {
    north: newPointNorthEast.lat(),
    south: newPointSouthWest.lat(),
    east: newPointNorthEast.lng(),
    west: newPointSouthWest.lng()
   };

   rectangle.setBounds(bounds);

}//rotate_rect

Answer 1

由于google.maps.Rectangle object 不支持设置/获取四个顶点的坐标（setBounds函数支持设置{仅{1}}和northeast坐标）

相反，您可以考虑以下解决方案：

从矩形对象创建多边形并将其显示在地图上
旋转多边形

工作示例

southwest

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 13,
        center: { lat: 33.678, lng: -116.243 },
        mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    var rectangle = new google.maps.Rectangle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map,
        bounds: {
            north: 33.685,
            south: 33.671,
            east: -116.224,
            west: -116.251
        }
    });

    var rectPoly = createPolygonFromRectangle(rectangle); //create a polygom from a rectangle

    rectPoly.addListener('click', function(e) {
        rotatePolygon(rectPoly,10);
    });


    document.getElementById('btnRotate').onclick = function() {
        window.setInterval(function() {
            rotatePolygon(rectPoly, 10);
        }, 500);
    };
}



function createPolygonFromRectangle(rectangle) {
    var map = rectangle.getMap();
  
    var coords = [
      { lat: rectangle.getBounds().getNorthEast().lat(), lng: rectangle.getBounds().getNorthEast().lng() },
      { lat: rectangle.getBounds().getNorthEast().lat(), lng: rectangle.getBounds().getSouthWest().lng() },
      { lat: rectangle.getBounds().getSouthWest().lat(), lng: rectangle.getBounds().getSouthWest().lng() },
      { lat: rectangle.getBounds().getSouthWest().lat(), lng: rectangle.getBounds().getNorthEast().lng() }
    ];

    // Construct the polygon.
    var rectPoly = new google.maps.Polygon({
        path: coords
    });
    var properties = ["strokeColor","strokeOpacity","strokeWeight","fillOpacity","fillColor"];
    //inherit rectangle properties 
    var options = {};
    properties.forEach(function(property) {
        if (rectangle.hasOwnProperty(property)) {
            options[property] = rectangle[property];
        }
    });
    rectPoly.setOptions(options);

    rectangle.setMap(null);
    rectPoly.setMap(map);
    return rectPoly;
}


function rotatePolygon(polygon,angle) {
    var map = polygon.getMap();
    var prj = map.getProjection();
    var origin = prj.fromLatLngToPoint(polygon.getPath().getAt(0)); //rotate around first point

    var coords = polygon.getPath().getArray().map(function(latLng){
       var point = prj.fromLatLngToPoint(latLng);
       var rotatedLatLng =  prj.fromPointToLatLng(rotatePoint(point,origin,angle));
       return {lat: rotatedLatLng.lat(), lng: rotatedLatLng.lng()};
    });
    polygon.setPath(coords);
}

function rotatePoint(point, origin, angle) {
    var angleRad = angle * Math.PI / 180.0;
    return {
        x: Math.cos(angleRad) * (point.x - origin.x) - Math.sin(angleRad) * (point.y - origin.y) + origin.x,
        y: Math.sin(angleRad) * (point.x - origin.x) + Math.cos(angleRad) * (point.y - origin.y) + origin.y
    };
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#map {
    height: 100%;
}

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

JSFiddle

Google Maps API会沿其顶点旋转矩形

1 个答案: