Google Maps API旋转矩形 [英] Google Maps API rotate Rectangle

问题描述

我有一个应用程序，它使用JavaScript API版本3在Google Maps上绘制矩形数组。 >基于用户输入。

是否将 Rectangle 对象限制为水平/垂直线？ API只需要两个角点作为位置，所以我没有看到任何方式来旋转这种形状。

我是否必须将形状类型更改为多边形？

有关如何实现我的目标的任何提示都将不胜感激。

我是否必须将形状类型更改为Polygon？

是自 google.maps.Rectangle class a> 不支持设置四个顶点的坐标（使用 setBounds 函数支持设置 northeast code>和 southwest 坐标）



以下示例演示如何：

• 从矩形对象创建一个多边形，并将其显示在地图上而不是矩形上
  
• 旋转多边形
>

工作示例

  html，body {height：100％;保证金：0; padding：0;}＃map {height：100％;}＃floating-panel {position：absolute;顶部：10px;左：25％; z-index：5; background-color：#fff;填充：5px;边界：1px固体＃999; text-align：center; font-family：'Roboto'，'sans-serif'; line-height：30px; < div id =





JSFiddle

strong>

I have an application which draws an array of rectangle on Google Maps using JavaScript API version 3. This works, but what I would like to do is rotate or skew each Rectangle based on user input.

Is the Rectangle object limited to horizontal/ vertical lines? The API only takes two corner points as location so I don't see any way to rotate this type of shape.

Do I in fact have to change the shape type to Polygon?

Any tips on how to achieve my goal would be much appreciated.

解决方案

Do I in fact have to change the shape type to Polygon?

Yes since google.maps.Rectangle class does not support to set coordinates of the four vertices (with setBounds function it is supported to set northeast and southwest coordinates only)

The below example demonstrates how to:

• create a polygon from a rectangle object and display it on the map instead of rectangle
• rotate a polygon

Working example

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

这篇关于Google Maps API旋转矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！