谷歌地圖API沿着其頂點旋轉矩形

Question

我有一個應用程序在某個點上的谷歌地圖上有一個矩形，我必須沿頂點旋轉矩形以及它應該是可編輯的，但寬度矩形應該總是大於其高度。

我已經看到了幾個其他解決方案堆棧溢出矩形旋轉，那裏它建議用戶折線或多邊形，但因爲我需要角度差90每邊之間，所以我不能轉移到其他形狀。

這裏是我的代碼：

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

因爲沒有可用於矩形不旋轉的事件所以現在我已經在click事件中：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功能支持到設置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