javascript api - ¿Centrar / configurar zoom del mapa para cubrir todos los marcadores visibles?




google maps (5)

El tamaño de la matriz debe ser mayor que cero. De lo contrario tendrás resultados inesperados.

function zoomeExtends(){
  var bounds = new google.maps.LatLngBounds();
  if (markers.length>0) { 
      for (var i = 0; i < markers.length; i++) {
         bounds.extend(markers[i].getPosition());
        }    
        myMap.fitBounds(bounds);
    }
}

Estoy configurando varios marcadores en mi mapa y puedo establecer de forma estática los niveles de zoom y el centro, pero lo que quiero es cubrir todos los marcadores y hacer zoom tanto como sea posible con todos los mercados visibles

Los métodos disponibles están siguiendo

setZoom(zoom:number)

y

setZoom(zoom:number)

Ni setCenter admite entradas de matriz de ubicación o ubicación múltiple ni setZoom tiene este tipo de funcionalidad


Necesitas usar el método fitBounds() .

var markers = [];//some array
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
 bounds.extend(markers[i].getPosition());
}

map.fitBounds(bounds);

setZoom(zoom:number) :


Para extender la respuesta dada con algunos trucos útiles:

var markers = //some array;
var bounds = new google.maps.LatLngBounds();
for(i=0;i<markers.length;i++) {
   bounds.extend(markers[i].getPosition());
}

//center the map to a specific spot (city)
map.setCenter(center); 

//center the map to the geometric center of all markers
map.setCenter(bounds.getCenter());

map.fitBounds(bounds);

//remove one zoom level to ensure no marker is on the edge.
map.setZoom(map.getZoom()-1); 

// set a minimum zoom 
// if you got only 1 marker or all markers are on the same address map will be zoomed too much.
if(map.getZoom()> 15){
  map.setZoom(15);
}

//Alternatively this code can be used to set the zoom for just 1 marker and to skip redrawing.
//Note that this will not cover the case if you have 2 markers on the same address.
if(count(markers) == 1){
    map.setMaxZoom(15);
    map.fitBounds(bounds);
    map.setMaxZoom(Null)
}

ACTUALIZAR:
Investigaciones adicionales en el tema muestran que fitBounds () es un asíncrono y es mejor hacer la manipulación del zoom con un oyente definido antes de llamar Fit Bounds.
Gracias @Tim, @ xr280xr, más ejemplos sobre el tema: SO:setzoom-after-fitbounds

google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
  this.setZoom(map.getZoom()-1);

  if (this.getZoom() > 15) {
    this.setZoom(15);
  }
});
map.fitBounds(bounds);

Esta utilidad del lado del cliente de MarkerClusterer disponible para Google Map, tal como se especifica aquí en los Artículos del desarrollador de Google Map , aquí hay un breve resumen de su uso:

Hay muchos enfoques para hacer lo que pediste:

  • Clustering basado en grilla
  • Agrupación basada en la distancia
  • Gestión de marcadores de la ventana gráfica
  • Tablas de fusión
  • Agrupador de marcadores
  • MarkerManager

Puedes leer sobre ellos en el enlace provisto arriba.

Marker Clusterer usa la agrupación basada en cuadrícula para agrupar todo el marcador que desea la cuadrícula. El agrupamiento basado en cuadrícula funciona dividiendo el mapa en cuadrados de un tamaño determinado (el tamaño cambia en cada zoom) y luego agrupando los marcadores en cada cuadrado de cuadrícula.

Antes de la agrupación

Después de la agrupación

Espero que esto sea lo que buscabas y esto resolverá tu problema :)


TomTom Maps API proporciona un punto final de geocodificación inversa que proporciona un JSON estructurado.

Puedes probarlo con el API Explorer .

Por ejemplo :

curl -X GET "https://api.tomtom.com/search/2/reverseGeocode/37.8328,-122.27669.json?key=*****" -H "accept: */*"

Te tendre

{
  "summary": {
    "queryTime": 6,
    "numResults": 1
  },
  "addresses": [
    {
      "address": {
        "buildingNumber": "1001",
        "streetNumber": "1001",
        "routeNumbers": [],
        "street": "42nd Street",
        "streetName": "42nd Street",
        "streetNameAndNumber": "1001 42nd Street",
        "countryCode": "US",
        "countrySubdivision": "CA",
        "countrySecondarySubdivision": "Alameda",
        "countryTertiarySubdivision": "Oakland",
        "municipality": "Oakland, Emeryville",
        "postalCode": "94608",
        "municipalitySubdivision": "Oakland, Emeryville",
        "country": "United States",
        "countryCodeISO3": "USA",
        "freeformAddress": "1001 42nd Street, Emeryville, CA 94608",
        "boundingBox": {
          "northEast": "37.832893,-122.276230",
          "southWest": "37.832777,-122.277006",
          "entity": "position"
        },
        "countrySubdivisionName": "California",
        "localName": "Emeryville"
      },
      "position": "37.832844,-122.276688"
    }
  ]
}

Puede obtener una CLAVE API gratuita (no se necesita tarjeta de crédito) y pruebe nuestros tutorials .

Divulgación: estoy empleado en TomTom.





javascript google-maps-api-3