A ideia é calcular o baricentro de um polígono e usar isso como coordenada do mapa.
O baricentro de um polígono é dado pela média aritmética das coordenadas (cartesianas!, detalhe importante para depois) dos pontos do polígono. De grosso modo, o seguinte algoritmo calcula isso:
x_baricentro = somatório (x dos pontos) / tamanho(pontos)
y_baricentro = somatório (y dos pontos) / tamanho(pontos)
O problema, entretanto, está que as coordenadas são dadas por coordenadas esféricas em graus! Para resolver isso, precisamos transformar essas coordenadas em radianos (180
graus vale pi
radianos). A fórmula geral é essa:
theta_rad = theta_graus * pi / 180
A conversão oposta é:
theta_graus = theta_rad *180/pi
Ok, agora temos a conversão para radianos. Agora, precisamos converter de radianos para um ponto no espaço cartesiano. Usei as fórmulas contidas nessa pergunta do SO internacional.
x = cos(lat) * cos(lon)
y = cos(lat) * sin(lon)
z = sin(lat)
Com isso, obtenho a média de (x,y,z)
, vou chamar de (x_c,y_c,z_c)
aqui na explicação. A partir desses valores, preciso converter de volta para radianos:
lon_rad = atan2(y, x)
hyp_rad = sqrt(x * x + y * y)
lat_rad = atan2(z, hyp)
Daí, só transformar para graus e ser feliz. O código abaixo está meio sujo e poluído, mas faz esses cálculos do jeito que foi mostrado.
function initialize() {
// 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
}
];
var x_cart = 0;
var y_cart = 0;
var z_cart = 0;
var i;
// ignorando primeiro elemento
for (i = 1; i < triangleCoords.length; i++) {
var x, y, z;
var lat, lon;
lat = triangleCoords[i].lat * Math.PI / 180; // transforma para radianos
lon = triangleCoords[i].lng * Math.PI / 180; // transforma para radianos
// obtém as coordenadas cartesianas
x = Math.cos(lat) * Math.cos(lon);
y = Math.cos(lat) * Math.sin(lon);
z = Math.sin(lat);
x_cart += x;
y_cart += y;
z_cart += z;
}
// média das coordenadas cartesianas
x_cart = x_cart/(triangleCoords.length - 1.0);
y_cart = y_cart/(triangleCoords.length - 1.0);
z_cart = z_cart/(triangleCoords.length - 1.0);
// processo para voltar a coordenadas esféricas
var lng_c, hyp, lat_c;
lng_c = Math.atan2(y_cart, x_cart);
hyp = Math.sqrt(x_cart * x_cart + y_cart * y_cart);
lat_c = Math.atan2(z_cart, hyp);
// de volta para graus, saindo dos radianos
lng_c = lng_c * 180.0/Math.PI;
lat_c = lat_c * 180.0/Math.PI;
var center = {
lat: lat_c,
lng: lng_c
};
console.log('lat lng' + lat_c + ',' + lng_c);
var map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 4,
center: new google.maps.LatLng(center.lat, center.lng),
mapTypeId: "roadmap"
});
// 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);
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<body onload="initialize()">
<div id="map_canvas" style="height: 100vh; width:100vw"></div>
</body>
O @viana descobriu depois a função da própria API do GoogleMaps que faz o cálculo do baricentro.
Essa função é bounds.getCenter()
, sendo var bounds = new google.maps.LatLngBounds()
. Note que é necessário adicionar os pontos desejados nessa borda para pegar o centro.
function initialize() {
// Define the LatLng coordinates for the polygon's path.
var bounds = new google.maps.LatLngBounds();
var i;
var polygonCoords = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.757370),
new google.maps.LatLng(25.774252, -80.190262)
];
// ignorando o primeiro elemento
for (i = 1; i < polygonCoords.length; i++) {
bounds.extend(polygonCoords[i]);
}
// Aqui imprime a coordenada central em relação ao poligono - (25.3939245, -72.473816)
console.log(bounds.getCenter());
var map = new google.maps.Map(document.getElementById("map_canvas2"), {
zoom: 4,
center: bounds.getCenter(),
mapTypeId: "roadmap"
});
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: polygonCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<body onload="initialize()">
<div id="map_canvas2" style="height: 100vh; width:100vw"></div>
</body>
centro = (sum(p[i].lat)/size(p), sum(p[i].lon)/size(p))