I have a rectangle in google map, it needs to be rotated from the clicked point, the rectangle doesn’t come out either. how to rotate a rectangle and the points inside it.
// 21 qator 22 qator va 71 qatorlarda
var inputHeight = document.querySelector("#inputHeight");
var inputWidth = document.querySelector("#inputWidth");
var inputX = document.querySelector('#inputx');
var inputY = document.querySelector('#inputy');
var inputa = document.querySelector('#alfa');
var apiKey = 'AIzaSyCcWRW3OffFhrY95FEcdTKCIQuuxKkEHNY';
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: {
lat: 39.760000,
lng: 64.420000,
},
position: google.maps.ControlPosition.TOP_TOP,
zoom: 16,
heading: 0,
tilt: 0,
mapId: "90f87356969d889c",
});
const buttons = [
["Rotate Left", "rotate", 5, google.maps.ControlPosition.LEFT_CENTER], // buni bosganda alfa 5 gradus qushiladi
["Rotate Right", "rotate", -5, google.maps.ControlPosition.RIGHT_CENTER], // buni bosganda alfa -5 gradus buladi
];
buttons.forEach(([text, mode, amount, position]) => {
const controlDiv = document.createElement("div");
const controlUI = document.createElement("button");
controlUI.classList.add("ui-button");
controlUI.innerText = `${text}`;
controlUI.addEventListener("click", () => {
adjustMap(mode, amount);
});
controlDiv.appendChild(controlUI);
map.controls[position].push(controlDiv);
});
const adjustMap = function (mode, amount) {
switch (mode) {
case "rotate":
map.setHeading(map.getHeading() + amount);
break;
default:
break;
}
};
map.addListener('click', function (event) {
var latitude = 39.760000; // Belgilangan nuqta latitude qiymati
var longitude = 64.420000; // Belgilangan nuqta longitude qiymati
// Draw a rectangle on the map
var rectangle = new google.maps.Rectangle({
strokeColor: '#050505',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: '#FF0000',
fillOpacity: 0.2,
map: map,
// bounds: {
// north: latitude,
// south: latitude - (inputHeight.value - 1) * (inputX.value/111000),
// east: longitude + (inputWidth.value - 1) * (inputY.value/85380),
// west: longitude
// },111000
});
// İki nokta arasındaki koordinatları tanımlayın
// var pointA = new google.maps.LatLng(39.760000, 64.420000);
// var pointB = new google.maps.LatLng(39.760011, 64.420011);
// // İki nokta arasındaki mesafeyi hesaplayın
// var distance = google.maps.geometry.spherical.computeDistanceBetween(pointA, pointB);
// // 20 metreye ulaşmak için gereken oranı hesaplayın
// var ratio = 20;
// // Orantıyı kullanarak 20 metrelik noktaları bulun
// var point20A = google.maps.geometry.spherical.interpolate(pointA, pointB, ratio);
// var point20B = google.maps.geometry.spherical.interpolate(pointB, pointA, ratio);
// // Çizgi oluşturun
// var line = new google.maps.Polyline({
// path: [point20A, point20B],
// geodesic: true,
// strokeColor: '#FF0000',
// strokeOpacity: 1.0,
// strokeWeight: 2
// });
var alfa = inputa.value // ana bu burchak ana shera tushishi kerak
var cosin = Math.cos((Math.PI * alfa) / 180)
var sinus = Math.sin((Math.PI * alfa) / 180)
var heightx = inputX.value/111000
var heighty = inputY.value/85380
// Convert coordinates to elevation
var elevator = new google.maps.ElevationService();
var locations = []
for (var j = 0; j <= (inputHeight.value - 1); j++) {
for (var i = 0; i <= (inputWidth.value - 1); i++){
locations.push({lat: latitude - (j * heightx * cosin) + ((i * heighty) * sinus) , lng: longitude + (i * (heighty * cosin)) + (j * heightx) * sinus});
}
}
if let rotation = rotation, let center = zoneCenter {
let radians = Double(rotation) * (Double.pi/180.0)
print(radians)
var newPoints: [CLLocationCoordinate2D] = []
for point in squarePoints {
let latitude: CLLocationDegrees = center.latitude + (point.longitude - center.longitude) * sin(radians) + (point.latitude - center.latitude) * cos(radians)
let longitude: CLLocationDegrees = center.longitude + (point.longitude - center.longitude) * cos(radians) - (point.latitude - center.latitude) * sin(radians)
newPoints.append(CLLocationCoordinate2DMake(latitude, longitude))
}
squarePointsWithRotation = newPoints
squareOverlay = MKPolygon(coordinates: &newPoints, count: squarePoints.count)
mapView.add(squareOverlay)
}
}
// var locations = [
// { lat: latitude, lng: longitude},
// { lat: latitude + (inputX.value/111000) * Math.sin((Math.PI * 45) /180), lng: longitude + (((inputY.value/85380) * Math.cos((Math.PI * 45) / 180))) },
// { lat: latitude - inputWidth.value * (inputY.value/85380) + (((inputY.value/85380) * Math.cos((Math.PI * 45) / 180))), lng: longitude + (((inputX.value/111000) * Math.cos((Math.PI * 45) / 180)))},
// { lat: latitude - inputWidth.value * (inputY.value/85380) + (inputX.value/85380) * Math.sin((Math.PI * 45) /180), lng: longitude + (inputX.value/111000)*inputHeight.value + (((inputY.value/85380) * Math.cos((Math.PI * 45) / 180)))},
// ];
var locationsList = document.getElementById('chiq')
locations.forEach(function(location) {
var listItem = document.createElement("li"); // Yangi <li> elementini yaratamiz
listItem.textContent = "Lat: " + location.lat + ", Lng: " + location.lng; // Matnni belgilaymiz
locationsList.appendChild(listItem); // <ul> elementining ichiga <li> elementini qo'shamiz
});
var positionalRequest = {
'locations': locations
};
var evalu = []
elevator.getElevationForLocations(positionalRequest, function (results, status) {
if (status === google.maps.ElevationStatus.OK) {
if (results) {
var gridParent = document.getElementById('pixelCanvas');
gridParent.innerHTML = ""; // Jadvalni tozalash
for ( var j =0; j < (inputHeight.value + 1); j++){
var row = document.createElement("tr");
for (var i = 0; i < (inputWidth.value ); i++) {
var elevation = results[j* inputWidth.value + i].elevation.toFixed(2);
evalu.push(results[j* inputWidth.value + i].elevation.toFixed(2));
var cell = document.createElement("td");
cell.textContent = elevation;
row.appendChild(cell);
gridParent.appendChild(row);
}
}
}
}
});
for (var i = 0; i < locations.length; i++) {
var marker = new google.maps.Marker({
position: locations[i],
map: map,
label: (i + 1).toString(),
zIndex: locations[i].alt,
});
}
});
}
// for (var i = 0; i < locations.length; i++) {
// var marker = new google.maps.Marker({
// position: locations[i],
// map: map
// });
window.initMap = initMap;
// console.log(inputHeight.value * (inputX.value/1840))
// Evalu massivini HTML-da ko'rsatish
var evaluContainer = document.getElementById('evaluContainer');
evaluContainer.textContent = JSON.stringify(evalu);
// console.log(locations)
var script = document.createElement('script');
script.src = 'https://maps.googleapis.com/maps/api/js?key=' + apiKey + '&callback=initMap';
script.defer = true;
script.async = true;
document.head.appendChild(script);
when you turn the card, the square must also turn. When I rotate the corner, it looks like a rhombus. When I turn it to 30 degrees, it misses 7 degrees, when I turn it to 60 degrees, it misses 9 degrees.
when the google map is rotated by 5 degrees, the rectangle should also rotate accordingly. only the points of the rectangle are output. I also posted the tested code.