google-maps - 谷歌地图旋转多边形

Question

在 map 上绘制多边形形状后。我想通过围绕多边形的点之一旋转刷新 map 时更改多边形指向的方向。例如，将多边形指向围绕我的第一个多边形点旋转 90 度的方向(代码如下所示)。谁能提供此工作的任何代码示例？ 我看过一些类似的帖子，但给出的示例显得过于复杂。

poly = new google.maps.Polygon({
  strokeWeight: 3,
  fillColor: '#5555FF'
});
poly.setMap(map);
poly.setPaths(new google.maps.MVCArray([path]));

  var triangleCoords = [
  new google.maps.LatLng(51.5087, -0.1277),
  new google.maps.LatLng(51.5387, -0.1077),
  new google.maps.LatLng(51.5387, -0.1477),
  new google.maps.LatLng(51.5087, -0.1277)
];

// Construct the polygon
triangle = new google.maps.Polygon({
  paths: triangleCoords,
  strokeColor: "#FF0000",
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: "#FF0000",
  fillOpacity: 0.8
});
triangle.setMap(map);

google.maps.event.addListener(map, 'click', triangle);

}

Answer 1

以下示例演示如何旋转多边形

Note: the rotation is performed around the first point

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757},
    {lat: 25.774, lng: -80.190}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
  
  //rotate a polygon
  document.getElementById('btnRotate').onclick = function() {
        rotatePolygon(bermudaTriangle, 90);
  };
}


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="Rotate 90"></div>
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

JSFiddle