我正在使用谷歌地图来允许用户绘制一个多边形,然后使用地图 API 和某种几何图形绘制以 16 度角覆盖绘制的多边形的最小有界正方形,即有界正方形应该限制整个多边形区域并且应该是相对于 y 轴旋转 16 度。
非常感谢您的帮助
问候
我正在使用谷歌地图来允许用户绘制一个多边形,然后使用地图 API 和某种几何图形绘制以 16 度角覆盖绘制的多边形的最小有界正方形,即有界正方形应该限制整个多边形区域并且应该是相对于 y 轴旋转 16 度。
非常感谢您的帮助
问候
这是一个复杂的问题。我可以概述一些步骤,让您获得最大的成功:
以下示例演示如何旋转多边形 ( google.maps.Polygon class
)。
操作说明:
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 drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.POLYGON
]
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, "overlaycomplete", function (event) {
var polygon = event.overlay;
google.maps.event.addListener(polygon, 'click', function (e) {
autoRotatePolygon(polygon, 5);
});
});
}
function autoRotatePolygon(polygon, angle) {
window.setInterval(function () {
rotatePolygon(polygon, 5);
}, 250);
}
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%;
}
<div id="map"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap&libraries=drawing"></script>