Usando a API do Google Maps, estou criando alguns pontos (marcadores customizados) aleatórios dentro de um polígono. Criei, a princípio, uma função no qual percorro um laço de 100 posições e distribuo aleatoriamente os pontos dentro do polígono. Caso a coordenada gerada caia fora do polígono, essa mesma nem é desenhada no mapa, fazendo com que nem sempre gere 100 pontos dentro do mesmo. Vejam a mágica acontecendo:
function initialize() {
var bounds = new google.maps.LatLngBounds();
var i;
var polygonCoords = [
new google.maps.LatLng(-23.554548, -46.607911),
new google.maps.LatLng(-23.556043, -46.595058),
new google.maps.LatLng(-23.564403, -46.593942),
new google.maps.LatLng(-23.567884, -46.604757)
];
for (i = 0; i < polygonCoords.length; i++) {
bounds.extend(polygonCoords[i]);
}
var map = new google.maps.Map(document.getElementById("map_canvas2"), {
zoom: 14,
center: bounds.getCenter(),
mapTypeId: "roadmap"
});
var sp_mooca = new google.maps.Polygon({
paths: polygonCoords,
strokeColor: '#000000',
strokeOpacity: 0.5,
strokeWeight: 2,
fillColor: '#000000',
fillOpacity: 0.2
});
sp_mooca.setMap(map);
gerarPontosAleatoriosNoPoligono(sp_mooca, map)
}
function gerarPontosAleatoriosNoPoligono(poli, map) {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < poli.getPath().getLength(); i++) {
bounds.extend(poli.getPath().getAt(i));
}
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();
for (var i = 0; i <= 100; i++) {
var ptLat = Math.random() * (ne.lat() - sw.lat()) + sw.lat();
var ptLng = Math.random() * (ne.lng() - sw.lng()) + sw.lng();
var point = new google.maps.LatLng(ptLat, ptLng);
if (google.maps.geometry.poly.containsLocation(point, poli)) {
var marker = new google.maps.Marker({
position: point,
map: map,
icon: {
path: google.maps.SymbolPath.CIRCLE,
fillColor: "#0000ff",
fillOpacity: 0.8,
strokeColor: 'white',
strokeWeight: .5,
scale: 4
}
});
}
}
}
#map {
height: 100%;
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<body onload="initialize()">
<div id="map_canvas2" style="height: 100vh; width:100vw"></div>
</body>
No entanto, na realidade eu gostaria que esses pontos fossem distribuídos uniformemente, com espaçamentos iguais, dentro desse polígono, e não aleatoriamente, como por exemplo 50 metro de distância um do outro. Como eu poderia fazer isso? Como posso distribuir pontos(marcadores) uniformemente dentro de um polígono?