Google Maps API会旋转矩形

Question

我有一个应用程序，它使用JavaScript API版本3在谷歌地图上绘制一个矩形阵列。这是有效的，但我想做的是根据用户输入旋转或倾斜每个Rectangle。

Rectangle对象是否仅限于水平/垂直线？ API仅将两个角点作为位置，因此我看不到任何旋转此类形状的方法。

我实际上必须将形状类型更改为Polygon吗？

Answer 1

我实际上必须将形状类型更改为多边形吗？

是的，因为google.maps.Rectangle class不支持设置四个顶点的坐标（使用setBounds函数，仅支持设置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;
}

<div id="floating-panel"><input type="button" id="btnRotate" value="Auto Rotate"></div>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

JSFiddle

Answer 2

您可以使用折线绘制旋转矩形。下面是根据方向绘制单行的示例代码。剩下的行可以通过添加不同的路径来使用。 [示例]：http://jsfiddle.net/Shivprasad09/3eb9gg3v/您可以通过更改代码中var方向的值来更改矩形的方向，以旋转任何度数选择。 var pathOptions = {

    geodesic: true, 
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 7 
};

var path = new google.maps.Polyline(pathOptions1);
var start_point = new google.maps.LatLng(lat, lon); 

var direction = 100;
var radius = 2000;
var end_point = new google.maps.geometry.spherical.computeOffset(start_point, radius, direction);
path.getPath().setAt(0, start_point);
path.getPath().setAt(1, end_point);

有用的参考链接简单折线和[谷歌地图Api]：https://developers.google.com/maps/documentation/javascript/reference#PolylineOptions